ٍspread operator في الجافاسكريبت

Spread Operator:

• عندما تحتاج إلى دمج مصفوفات أو إنشاء نسخة جديدة من مصفوفة مع إضافة عناصر جديدة.
• عندما تحتاج إلى تمرير عناصر مصفوفة كوسائط فردية لدالة.
• عندما تحتاج إلى نسخ سطحية shallow copy من مصفوفة.

Array.push:
- عندما تحتاج إلى إضافة عنصر أو عناصر جديدة إلى نهاية المصفوفة الحالية دون تغيير في هيكل المصفوفة.

ملاحظة: يُشير مصطلح "shallow copy" إلى عملية نسخ سطحية لهيكل بيانات مثل مصفوفة. عند إنشاء shallow copy، يتم إنشاء نسخة جديدة من الهيكل الرئيسي، ولكن العناصر الموجودة داخلها تظل تشير إلى نفس العناصر الموجودة في الهيكل الأصلي. بمعنى آخر، يتم نسخ الإشارات (references) إلى العناصر بدلاً من نسخ العناصر أنفسها.

تستخدم الميثود push لإضافة عنصر جديد أو أكثر في المصفوفة وتتم الإضافة في نهاية المصفوفة 

let numbers = [1, 2, 3];
numbers.push(4)
console.log(numbers);
// output [1, 2, 3, 4]

نلاحظ انه تم اضافة العنصر في نهاية المصفوفة أى انه تم التعديل فى المصفوفة الأصلية

أما ال spread operator تستخدم عندما نريد  نشر عناصر مصفوفة وهى تأخذ نسخة من عناصر المصفوفة

const array = [1, 2, 3];
console.log(...array);
//output 1,2,3

ويمكن استخدامها لنشر عناصر مصفوفة بداخل عناصر مصفوفة أخرى

const fruits = [apple,banana];

const fruitsAndVegatables=[...fruits,tomato,concumber];
console.log(fruitsAndVegatables)

//output [apple,banana,tomato,concumber]

ويمكن استخدامها لدمج عناصر مصفوفتين 

const animals = [dog,cat];
const birds =[hen,duck]
const animalsAndBirds=[...animals,...birds];
console.log(animalsAndBirds)
//output [dog,cat,hen,duck]

أولاً الـ spread operator عبارة عن مشغل يستخدم لفرد عناصر مصفوفة أو كائن إلى قائمة منفصلة ونستخدمه في أي مكان يمكن فيه استخدام قائمة منفصلة.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

أما array.push ببساطة هي طريقة method تابعة للمصفوفات في جافاسكريبت تضيف عنصرًا أو أكثر إلى نهاية مصفوفة.

أي نستخدمها فقط مع المصفوفات.

const arr1 = [1, 2, 3];
arr1.push(4, 5);

console.log(arr1); // [1, 2, 3, 4, 5]

وبالتالي استخدام spread operator عام أكثر ومختلف أيضًا، لحالات دمج مصفوفات أو كائنات، إنشاء نسخة جديدة من مصفوفة مع تغييرات طفيفة أو تمرير عناصر مصفوفة كوسيطات لوظيفة.

أيضًا نستطيع من خلاله تحديث خواص الكائن لاحظ المثال التالي:

const person = {
  name: "mahmoud",
  age: 30,
};

const updatedPerson = {
  ...person,
  age: 31,
  city: "Cairo",
};

console.log(updatedPerson); // { name: "mahmoud", age: 31, city: "Cairo" }

لاحظ كيف تم تغيير خاصية age في الكائن الثاني رغم أنها كانت 30 في البداية.

وذلك المُشغل نستخدمه في React لتحديث الحالة State بنفس الكيفية.

الفرق الرئيسي بين spread operator و array.push في JavaScript هو كيفية تعاملهما مع العناصر في المصفوفة.

دعنا نأخذ مثال ونقوم بحله بكلا الطريقتين 

لديك المصفوفة التالية :

["firstName", "LastName"]

قم بتعديلها لتصبح كالتالي :

["firstName", "LastName", "JobName"]

• والان دعنا نقوم بتعديلها عبر طريقة  array.push

const arr = ["firstName", "LastName"];
arr.push( "JobName");//هذا السطر المسؤول عن اضافة العنصر الجديد
console.log(arr); 

سيقوم هذا الكود بطباعة التالي في ال console :

اقتباس

["firstName", "LastName", "JobName"]

وهي النتيجة التي نريدها حيث انه قام باضافة العنصر الجديد الى نهاية المصفوفة الاساسية 

• والان دعنا نضيفه عن طريق ال spread operator والذي يقوم بانشاء مصفوفة جديدة واضافة المصفوفة الاساسية اليها كالتالي :

const arr1 = ["firstName", "LastName"];
const arr2 = [...arr1,"JobName"]; // هنا قمنا بانشاء مصفوفة جديدة واضافة المصفوفة الاولى لها 
console.log(arr2); 

وايضا قام بطباعة نفس النتيجة في ال console

اذا في النهاية نستنتج انه كلاهما يمكنه القيام بنفس المهمة ولكن بطريقة مختلفة حيث ان 

 array.push : يقوم باضافة عناصر الى مصفوفة قديمة ولا يمكنه انشاء مصفوفة جديدة اما 

spread operator : يقوم بانشاء مصفوفة جديدة واضافة المصفوفة القديمة داخل الجديدة ولا يمكنه اضافة عناصر للمصفوفة القديمة 

ارجو ان تكون الفكرة قد تم توضيحها بشكل عام 

وبالتوفيق لك 

مرحبا , 
كما تم الشرح فإن الspread operator هو لعمل نسخة سطحية او shallow copy لدالة  ما .
و Array.push يقوم بتعديل العنصر نفسة و ليس نسخة .

بالنسبة لأمر متى نستخدم كليهما :
من المتعارف عليه أن تعديل array ما في بعض الأحيان و خاصة باستخدام الأمرين push و shift و unshift و pop , هذة الأمور تستهلك مجهودا من الcpu أكبر نسبيا من االمجهود الذي سوف يتم استخدامة إذا قمت بعمل نسخة .
فمعرفة متى تستخدم كليهما تتوقف على أكثر من عامل ف مثلا إذا كنت تتعامل مع state في redux على سببيل المثال ف في هذة الحالة من المستحب استعمال spread operator و في العموم إذا كنت تتعامل مع array صغيرة نسبيا لن يشكل فارق كبير .

تحياتي .