المصفوفات في جافا سكريبت

يمكن أن تكون المصفوفات في JavaScript مربكة وصعبة الفهم في البداية، خاصة عند التعامل مع المفاهيم المتقدمة. لقد واجهت أيضًا صعوبة في فهم المصفوفات في JavaScript في البداية. في هذه المقالة، أهدف إلى إزالة الغموض عن المصفوفات في JavaScript، وتفصيل كل ما تحتاج إلى معرفته حتى تتمكن من العمل معهم بثقة.

تعريف

ما هي المصفوفة

المصفوفة عبارة عن بنية بيانات تقوم بتخزين مجموعة من العناصر، يمكن الوصول إلى كل منها بواسطة فهرس. في العديد من لغات البرمجة، تقوم المصفوفات بتخزين العناصر في مواقع ذاكرة متجاورة. في JavaScript، المصفوفات عبارة عن كائنات عالية المستوى تشبه القائمة تُستخدم لتخزين قيم متعددة في متغير واحد. وهي غير مفهرسة بصفر، مما يعني أن العنصر الأول يقع عند الفهرس 0.

المصفوفات في جافا سكريبت

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

لماذا استخدام مصفوفة؟

تساعد المصفوفات في إدارة البيانات بكفاءة من خلال السماح لك بتخزين القيم والوصول إليها ومعالجتها. يتم استخدامها لأي شيء يتضمن قوائم أو مجموعات، مثل إدارة العناصر في عربة التجارة الإلكترونية أو تتبع مدخلات المستخدم.

كيفية إنشاء مصفوفة في جافا سكريبت

هناك طرق متعددة لإنشاء المصفوفات في جافا سكريبت، وسوف أتطرق إلى القليل منها:

1. استخدام المصفوفة الحرفية []

في JavaScript، يمكنك ببساطة إنشاء مصفوفة عن طريق تعيين [] لمتغير أو ثابت

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

لاحظ أن عناصر المصفوفة مفصولة بفاصلة،

2. استخدام منشئ المصفوفة

يمكنك أيضًا إنشاء مصفوفة كمثيل لمنشئ JavaScript Array الأصلي باستخدام بناء الجملة التالي:
const myArray = صفيف جديد ()
يأخذ منشئ المصفوفة وسيطة واحدة أو أكثر (يجب أن تكون أرقامًا)، ويتصرف بشكل مختلف وفقًا لعدد الوسائط التي تمررها!
إذا قمت بتمرير وسيطة واحدة: const myArray = new Array(4)، فسيؤدي ذلك إلى إنشاء مصفوفة جديدة تحتوي على 4 عناصر فارغة!

إذا قمت بتمرير أكثر من وسيطة واحدة: const myArray = new Array(1, 2, 3)، يؤدي هذا إلى إنشاء مصفوفة مكونة من 3 أرقام 1 و2 و3 على التوالي وهو مماثل لكتابة const myArray = [1, 2 , 3]!

أعلم أن هذا يبدو مربكًا ولكن ثق بي أنه سيكون سهلاً إذا قمت بإجراء المزيد من التمارين معهم!

3. استخدام طريقة Array.of

يمكن أيضًا إنشاء المصفوفات باستخدام هذه الطريقة Array.of وستقوم فقط بإنشاء مصفوفة تحتوي على جميع العناصر التي تمررها إليها كوسائط. يكمن الفرق بين استخدام Array.of ومنشئ Array في كيفية تصرفهما عندما يتلقيان وسيطة واحدة!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

لاحظ كيف يتصرف Array.of عندما يتلقى معلمة واحدة، على عكس مُنشئ Array الذي يقوم فقط بإنشاء مصفوفة من العناصر الفارغة، يقوم Array.of فقط بإنشاء مصفوفة بعنصر واحد وهو العنصر الذي قمت بتمريره!

4. استخدام طريقة Array.from

يمكنك أيضًا استخدام طريقة Array.from(iterable)، التي تتلقى وسيطة واحدة والتي يجب أيضًا أن تكون قابلة للتكرار وتقوم بإنشاء مصفوفة منها! على سبيل المثال، يمكنك تمرير مجموعة إلى هذه الطريقة وإنشاء مصفوفة من قيم تلك المجموعة!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

معالجة المصفوفات في جافا سكريبت

لقد رأينا ما هي المصفوفة وكيف يمكنك إنشاء مصفوفات في جافا سكريبت، والآن المشكلة المتبقية التي قد تطرحها على نفسك هي، كيف يمكنني استخدام المصفوفات والعمل معها؟
حسنًا، هذا سؤال جيد!

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

تقليديًا، نستخدم الحلقات للتكرار على العناصر المخزنة في المصفوفة واستخدامها!
يوضح المثال التالي كيف يمكنك التكرار على مصفوفة من الأرقام وعرض ضعف كل رقم داخل المصفوفة:

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  استخدام بناء جملة طريقة صفيف JavaScript الحديثة


 تأتي JavaScript مع العديد من أساليب المصفوفات (وظائف ذات ترتيب أعلى) خارج الصندوق، ويمكن الوصول إليها لجميع مثيلات المصفوفات من خلال كائن Array.prototype، ونحن نستخدم تلك الأساليب التي توفرها JavaScript لمعالجة البيانات المخزنة في المصفوفات والعمل معها! يمكننا أيضًا إنشاء أساليب المصفوفة الخاصة بنا (سننظر في هذا في الفصل التالي)

إنها طرق ذات ترتيب أعلى، لأنها تأخذ وظائف أخرى كوسيطات وتستخدم تلك الوظائف لمعالجة البيانات المخزنة في المصفوفات!

يتم تصنيف طرق المصفوفة هذه أيضًا إلى فئتين:



التحور: هذه التكرارات فوق المصفوفة وأثناء تطبيق وظيفة رد الاتصال، فإنها تؤدي أيضًا إلى تغيير المصفوفة الأصلية!

غير قابلة للتغيير: تتكرر هذه العناصر على المصفوفة وتطبق وظيفة رد الاتصال، ولكن بدلاً من تغيير المصفوفة الأصلية، فإنها ترجع مصفوفة جديدة


  
  
  1.forEach () الطريقة


forEach() هي طريقة ذات ترتيب أعلى للمصفوفة تُستخدم للتكرار فوق عناصر المصفوفة وتطبيق وظيفة رد الاتصال على كل عنصر دون تعديل المصفوفة الأصلية أو إنشاء مصفوفة جديدة!

بناء جملة وظائف رد الاتصال التي عادة ما تكون وظيفة مجهولة (عادةً ما تكون هي نفسها في جميع الطرق الأخرى):

function (currentElement[, index, targetArray]) {}




 هذا يعني أنه في كل تكرار، تتمتع طريقة الصفيف بإمكانية الوصول إلى العنصر الحالي في التكرار (currentElement)، والفهرس الموجود في فهرس الصفيف وهو اختياري، والإشارة إلى الصفيف الهدف الذي يتم تنفيذ الطريقة فيه targetArray وهو اختياري أيضًا. ولكن يمكنك استدعاء هذه المعلمات كيفما تشاء، ما عليك سوى الانتباه إلى مواقعها.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2.طريقة الخريطة ().


 تمامًا مثل forEach Map، فهي أيضًا طريقة أخرى للتكرار على عناصر المصفوفة وتطبيق وظيفة رد الاتصال على كل عنصر، ولكن على عكس forEach Map هي طريقة غير قابلة للتغيير، وبالتالي فهي تنشئ وتعيد المصفوفة الجديدة كنتيجة لـ التكرار ولا يغير المصفوفة الأصلية!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. طريقة التصفية ().


يتم استخدام طريقة التصفية () عندما تريد تصفية المصفوفة عن طريق إزالة العناصر التي لا تريدها، وهذه طريقة غير قابلة للتغيير وتقوم بإرجاع مصفوفة جديدة!

لكل تكرار، يجب أن يُرجع رد الاتصال داخل عامل التصفية () قيمة منطقية تشير إلى ما إذا كان سيتم تضمين العنصر الحالي في المصفوفة الجديدة المُفلترة أم لا

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. طريقة تقليل ().


تختلف طريقة 
reduce() قليلاً عن تلك المذكورة أعلاه. فكر في الأمر كطريقة لدمج كافة العناصر الموجودة في المصفوفة في قيمة واحدة عن طريق تطبيق دالة على كل عنصر، واحدًا تلو الآخر. تقوم بإرجاع قيمة واحدة من جميع عناصر المصفوفة، وسوف تستخدمها عندما تريد قيمة واحدة من جميع عناصر المصفوفة مثل المجموع أو المتوسط ​​أو الحد الأقصى أو الحد الأدنى على سبيل المثال لا الحصر!

بناء الجملة مختلف أيضًا

Array.reduce(function(accumulator, element[,index, targetArray]) [, الاسم الأولي])

تأخذ هذه الطريقة وسيطتين، الأولى هي دالة رد الاتصال تمامًا مثل الطرق الأخرى، والثانية ستكون القيمة الأولية لمتغير المركم. هذه الوسيطة الثانية اختيارية، إذا لم يتم توفيرها، فسيستخدم التخفيض العنصر الأول من المصفوفة كقيمة أولية للمراكم

يحتفظ المجمع بالنتيجة التي يتم إرجاعها بواسطة وظيفة رد الاتصال في كل تكرار وستكون النتيجة النهائية التي يتم إرجاعها من التخفيض بمجرد انتهاء التكرار!

دعونا نحاول العثور على مجموع من مجموعة من الأرقام:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. طريقة الشريحة ().


slice() هي طريقة مصفوفة مفيدة أخرى في JavaScript، تُستخدم لاستخراج جزء صغير من المصفوفة! تنشئ شريحة () مصفوفة جديدة عن طريق نسخ قسم من مصفوفة موجودة دون تعديل المصفوفة الأصلية.

بناء جملة طريقة الشريحة () كما يلي:

Array.slice(startIndex, endIndex) يمثل startIndex نقطة بداية الاستخراج وهو شامل ويمثل endIndex عنصر النهاية للاستخراج وهو اختياري وحصري. عندما لا يتم توفيرها، تقوم أساليب الشريحة بنسخ مصفوفة من startIndex إلى نهاية المصفوفة!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. طريقة لصق ().


splice() هي طريقة مصفوفة في JavaScript، تُستخدم لإضافة العناصر وإزالتها واستبدالها في المصفوفة. يقوم splice() بتغيير محتوى المصفوفة عن طريق إضافة أو إزالة أو استبدال العناصر في المصفوفة.

 بناء جملة طريقة splice () كما يلي:

Array.splice(index, ElementsToRemove, newElement1, newElement2, ..., newElementn)

قد يبدو هذا مربكًا ولكن دعني أحاول التوضيح:

الفهرس يعني فهرس البداية في المصفوفة الذي من المفترض أن تبدأ فيه إزالة العنصر وهو شامل.

يمثل ElementToRemove عدد العناصر من الفهرس الذي تريد إزالته من المصفوفة، إذا كنت تريد فقط إضافة عناصر جديدة، فيمكنك توفير 0 في هذا الموضع.

newElement1، newElement2 وما إلى ذلك. يمكن أن تكون هذه أي عدد من العناصر التي تريد إضافتها في المصفوفة الخاصة بك وسوف تحل محل العناصر التي حددتها في المصفوفة الخاصة بك!

كلام كثير، دعونا نرى مثال:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "pineapple") وهذا يعني أنه من فهرس 1، قم بإزالة عنصر 1 وأضف "أناناس"

إذا أردنا فقط إضافة الأناناس في المصفوفة دون استبدال قيمة أخرى به، فيمكننا كتابة هذا كـ 

Fruits.splice(1, 0, "pineapple") سيؤدي هذا إلى إضافة الأناناس بعد العنصر في الفهرس 1 ولن يزيل أي عنصر آخر من هذه المصفوفة.


  
  
  خاتمة


 تعد المصفوفات ميزة أساسية ومتعددة الاستخدامات في JavaScript، حيث توفر بنية أساسية لتخزين مجموعات البيانات ومعالجتها. بدءًا من إنشاء المصفوفات البسيطة باستخدام القيم الحرفية وحتى الأساليب الأكثر تقدمًا مثل Array.of() وArray.from()، توفر مصفوفات JavaScript مجموعة من الطرق للتعامل مع أنواع مختلفة من البيانات. من خلال إتقان معالجة المصفوفة من خلال الحلقات أو الطرق الحديثة مثل forEach() وmap() وfilter() وreduce() وslice() وsplice()، يمكنك إجراء عمليات معقدة بكفاءة. يعد فهم ميزات المصفوفة هذه أمرًا أساسيًا لإتقان جافا سكريبت، مما يسمح لك بكتابة تعليمات برمجية أكثر وضوحًا وإيجازًا وقوة.