ثلاث نقاط مفيدة - الباقي والانتشار في JavaScript

معلمات الباقي

تسمح لنا صيغة الباقي بتمثيل عدد غير محدد من الوُسطاء على شكل مصفوفة. ألقِ نظرة على الدالة التي تجمع كل الوُسطاء التي تم تمريرها.

const sum = (....args) => args.reduce((prev, current) => prev + current));

وحدة التحكم.log(مجموع(1، 2))؛ // 3
console.log(sum(1, 2, 3))؛ // 6

بناء جملة الانتشار

يسمح لنا عامل الانتشار بتوسيع الكائنات القابلة للتكرار إلى عناصر فردية. هذه الوظيفة هي عكس ما حققناه مع معاملات البقية. يمكن تطبيقها على جميع العناصر القابلة للتكرار، مثل المصفوفات، والكائنات، والمجموعات، والخرائط، إلخ.

const sum = (x، y، z) => x + y + z;
تشكل الأرقام = [1، 2، 3];

console.log(sum(...numbers))؛ // 6

ثلاث نقاط في حالات الاستخدام الحقيقي

نسخ مصفوفة

تنتقل صيغة الانتشار بشكل فعال إلى مستوى واحد أعمق أثناء نسخ مصفوفة. مستوى واحد يعني نسخ المستوى الأول من المراجع.

const array0 = [1، [2، 3]];
const array1 = [...array0];

وحدة التحكم، سجل(array1)؛ // [1، [2، 3]]

إنشاء مصفوفة من العناصر الفريدة

أنشئ المجموعة التي تخزّن العناصر الفريدة فقط وحوّل ظهرها إلى مصفوفة.

تشكل صفيف = [1، 1، 2، 3];
const uniqueElements = [...مجموعة جديدة (مصفوفة)];

وحدة التحكم.log(عناصر فريدة)؛ // [1، 2، 3]

ربط المصفوفات المتسلسلة

تشكل مصفوفة0 = [1، 2];
تشكل مصفوفة1 = [3، 4];
مجمعة = [...مصفوفة0، ...مصفوفة1];

console.log(concated)؛ // [1، 2، 3، 4]

تقطيع المصفوفة

const [firstElement, ...newArray] = [1, 2, 3, 4];

وحدة التحكم.log(firstElement)؛ // 1
console.log(newArray) ؛ // [2، 3، 4]

يمكننا أيضًا إزالة n العناصر الأولى بفاصلة.

const [،،،، ...مصفوفة جديدة] = [1، 2، 3، 4];

console.log(newArray); // [4]

إدراج مصفوفة في بداية مصفوفة أخرى

تشكل مصفوفة0 = [4، 5، 6];
تشكل مصفوفة1 = [1، 2، 3];
const newArray = [...array1، ...array0];

وحدة التحكم.log(مصفوفة جديدة)؛ // [ 1، 2، 3، 4، 5، 6]

توليد مصفوفة من الأرقام من 0 إلى n

const array = [...Array(10)].map((_، i) => i);

console.log(array) ؛ // [ 0, 1, 2, 3, 3, 4, 5, 6, 7, 8, 9 ]

إعادة هيكلة كائن

const { x, y, ...z } = { س: 1، ص: 2، أ: 3، ب: 4 };

console.log(x)؛ // 1
console.log(y)؛ // 2
console.log(z)؛ // { a: 3, b: 4 }

إنشاء نسخة من كائن

دع الشخص = {
  الاسم: 'جون',
  العمر: 25,
  المحفظة: {
    المجموع: 500,
    العملة: 'USD'
  }
};
دع نسخة الشخص = { ...الشخص };

console.log(personCopy);
// {
// الاسم: 'جون',
// العمر: 25,
// المحفظة: {
// المجموع: 500,
// العملة: 'USD'
// }
// }

لاحظ أن نسخة الكائن التي يتم إنشاؤها هي كائن جديد بجميع خصائص الكائن الأصلي ولكن لا تحتوي على أي من معلوماته النموذجية.

الشخص.العمر = 20;

وحدة التحكم.log(person.age)؛ // 20
console.log(personCopy.age)؛ // 25

لاحظ أن بناء الجملة المنتشر ينشئ نسخة "سطحية" من الكائن، لذا سيتم نسخ خاصية "المحفظة" كمرجع للكائن الفرعي الأصلي فقط. للاستنساخ العميق، يمكنك استخدام طريقة JSON stringify / parse أو طريقة "استنساخ عميق" التي يوفرها Lodash اعتمادًا على مدى تعقيد الكائن الخاص بك. في بعض الحالات يمكن أن تكون هذه الطريقة مفيدة أيضًا:

دع نسخة الشخص = {...الشخص، المحفظة = {...محفظة الشخص...المحفظة}}; 

إضافة خصائص مشروطة إلى الكائنات

يمكننا إضافة الخصائص بشكل مشروط إلى كائن جديد نقوم بإنشائه عن طريق استخدام عامل الانتشار مع تقييم الدائرة القصيرة.

تشكل الألوان = {
  أحمر: '#ff0000',
  الأخضر: '#00ff00',
  أزرق '#0000ff'
};
يشكل الأسود = {
  أسود: '#000000'
};

دع الأسود الإضافي = خطأ;
دع الدمج الشرطي = {
  ...الألوان,
  ...(extraBlack ? أسود : {})
};

console.log(conditionalMerge);
// {
// أحمر: '#ff0000',
// الأخضر: '#00ff00',
// أزرق: '#0000ff'
// }

أسود إضافي = صحيح;
دمج شرطي = {
  ...الألوان,
  ...(extraBlack ? أسود : {})
};

console.log(conditionalMerge);
// {
// أحمر: '#ff0000',
// الأخضر: '#00ff00',
// أزرق: '#0000ff'
// أسود: '#000000'
// }

تقسيم سلسلة إلى أحرف

يشبه هذا استدعاء طريقة التقسيم باستخدام سلسلة فارغة كمعامل.

const split = [....'qwerty'];
console.log(انقسام)؛ [ [ 'q'، 'w'، 'e'، 'r'، 't'، 'y']

اقرأ المزيد:

3 تحديات مشتركة في تطوير منتجات البرمجيات للشركات الناشئة

أفضل أنواع المشاريع لجافا

كيف لا تقتل مشروعاً بممارسات الترميز السيئة؟