javascript_array كيفية استخدام وظائف المصفوفات في الجافا سكريبت – توابع التعديل


إبراهيم البحيصي

تتكون المصفوفة في الجافا سكريبت من قائمة عناصر، وتحتوي الجافا سكريبت على العديد من الوظائف المرفقة والتي تعمل على المصفوفات. الوظائف التي تقوم بالتعديل عل المصفوفة الأصلية تُعرف بتوابع التعديل Mutator Methods))، والوظائف التي تعيد قيمة جديدة أو شكل آخر تُعرف بتوابع الوصول (Accessor Methods).
للاستفادة أكثر من هذا المقال، يجب أن يكون لديك معرفة مسبقة بكيفية إنشاء المصفوفات، فهرستها، التعديل عليها والمرور على عناصرها بواسطة حلقة التكرار. تستطيع مراجعة درس فهم المصفوفات في الجافا سكريبت لأخذ فكرة عما سبق.
المصفوفات تتشابه مع النصوص من حيث أن كلاهما يتكون من مجموعة من العناصر التي يمكن الوصول لها عبر رقم الفهرس. على الرغم من ذلك، من الأهمية أن نتذكر أن النصوص ثابتة وغير قابلة للتعديل (Immutable). ولكن على الجانب الاّخر، فإن المصفوفات غير ثابتة (Mutable)، ونستطيع التعديل عليها بشكل مباشر.
في هذا المقال سوف نشرح عمليات إضافة وإزالة العناصر من المصفوفة، عكس المصفوفة، استبدال المصفوفة والتعديل على عناصرها.

الوظيفة isArray()

قبل البدء بشرح توابع التعديل، سنتعرض للوظيفة isArray() والتي تقوم بفحص هل الكائن عبارة عن مصفوفة أم لا. في حالة كان الكائن الذي نقوم بفحصه من نوع مصفوفة، فإن الوظيفة ستعيد القيمة المنطقية true، وفي حالة لم يكن مصفوفة، فإن الوظيفة ستعيد القيمة المنطقية false.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Test if fish variable is an array
Array.isArray(fish);
Output
True

الوظيفة isArray() مفيدة بسبب أن العملية typeof التي تُستخدم عادة في فحص هذه الحالات ستعيد لنا القيمة object عند استخدامها مع المصفوفة، ومن المهم في بعض الأحيان معرفة هل الكائن مصفوفة أم لا.
لاحظ أن الوظيفة isArray() تُكتب بطريقة مختلفة عن أغلب وظائف المصفوفات، حيث يتم تمرير الكائن الذي يمثل المصفوفة كمُعطى للوظيفة.
بعد أن تعرفنا على الوظيفة التي تساعدنا في فحص هل الكائن الذي نتعامل معه مصفوفة أم لا، سنبدأ بشرح وظائف توابع التعديل.

الوظيفة pop()

أول وظيفة سنتناولها في الشرح هي وظيفة pop()، التي تُزيل العنصر الأخير من نهاية مصفوفة.
لنفترض أنه لدينا مصفوفة باسم fish تحتوي على أنواع بعض الأسماك:

let fish = [ "piranha", "barracuda", "koi", "eel" ];

عند استدعاء الوظيفة pop() سيتم إزالة اخر عنصر في المصفوفة، والذي سيكون العنصر الذي يساوي القيمة النصية “eel” :

// Use pop method to remove an item from the end of an array
fish.pop();

نقوم بطباعة محتوى المصفوفة لنتأكد من أنها أصبحت لا تحتوي القيمة المحذوفة:

fish;
Output
[ 'piranha', 'barracuda', 'koi' ]

بذلك نكون قد أزلنا العنصر “eel” من المصفوفة بنجاح. الوظيفة pop() لا تأخذ أي معاملات أخرى.

الوظيفة shift()

الوظيفة shift() هي وظيفة أخرى من توابع التعديل وتقوم بإزالة العنصر الأول من المصفوفة. لنفترض وجود المصفوفة fish بالعناصر التالية:

let fish = [ "piranha", "barracuda", "koi", "eel" ];

نستخدم الوظيفة shift() لإزالة العنصر الأول “piranha” والموجود في الفهرس رقم 0، وكذلك سيتم إزاحة كافة عناصر المصفوفة بمقدار فهرس واحد للأسفل.

// Use shift method to remove an item from the beginning of an array
fish.shift();

fish;
Output
[ 'barracuda', 'koi', 'eel' ]

في المثال السابق، تم إزالة العنصر الأول وإجراء عملية الإزاحة لكافة العناصر الباقية، لهذا السبب، وبشكل عام، فإنه يُفضل أن يتم استخدام الوظيفة pop() قدر المستطاع لإزالة العناصر من المصفوفة لعدم وجود عملية إزاحة العناصر عند استخدامها.

الوظيفة push()

الوظيفة push() تعمل على إضافة عنصر جديد أو عدة عناصر جديدة في نهاية المصفوفة.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

لإضافة عنصر جديد، نمرر العنصر للوظيفة كمُعامل:

// Use push method to add an item to the end of an array
fish.push("swordfish");

fish;
Output
[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]

من الممكن أيضًا أن نضيف أكثر من عنصر دفعة واحدة لنهاية المصفوفة بالشكل التالي:

fish.push("swordfish", "dragonfish") 

الوظيفة unshift()

لإضافة عنصر جديد أو عدة عناصر في بداية المصفوفة، نستخدم الوظيفة unshift().

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");

fish;
Output
[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]

في المثال السابق، العنصر shark”” تم اضافته في الفهرس رقم 0، مع إزاحة كافة العناصر للإمام. نستطيع إضافة عدة عناصر دفعة واحدة بنفس الطريقة التي استخدمناها مع الوظيفة shift() وذلك بتمرير العناصر بحيث تكون مفصولة عن بعضها بفاصلة عادية.
الوظيفتان pop() و push() تؤثران على نهاية المصفوفة، والوظيفتان shift() و unshift() تؤثران على بداية المصفوفة. يوجد طريقة سهلة لتذكر هذه المعلومة وهي معرفة أن الوظيفتان shift() و unshift() تقومان بعمل إزاحة للعناصر في المصفوفة.

الوظيفة splice()

تقوم الوظيفة splice() بإضافة أو إزالة عنصر من أي موقع في المصفوفة. الوظيفة تقوم إما بالإضافة أو الحذف كلٌ على حدة، أو الإضافة والحذف بشكل متزامن.
تأخذ الوظيفة splice() ثلاث معاملات، الأول هو الفهرس الذي سنبدأ من عنده العملية، الثاني هو عدد العناصر التي نريد حذفها، الثالث هو العنصر الذي نريد اضافته (اختياري).

splice(index number, number of items to remove, items to add)

الأمثلة التالية توضح كيفية استخدام الوظيفة splice() في إضافة وحذف العناصر في المصفوفة.

الإضافة باستخدام splice()

إذا قمنا بإعداد المعامل الثاني في الوظيفة splice() ليأخذ القيمة 0، فإنه لن يتم حذف أي عنصر. بهذه الطريقة، نستطيع أن نضيف عنصر لمصفوفة في أي موقع فيها، وهذه الطريقة تُعتبر أفضل وأقوى من استخدام الوظيفتين push() و unshift() واللتان تقومان بالإضافة في نهاية المصفوفة أو بدايتها فقط.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");

fish;
Output
[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]

النص الجديد “manta ray” تم إضافته للمصفوفة في الفهرس رقم 1.

الإزالة باستخدام splice()

إذا تجاهلنا المُعامل الثالث (الاختياري) في الوظيفة splice()، نستطيع ببساطة إزالة أي عنصر في المصفوفة ومن أي موقع فيها:

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items, starting at index position 1
fish.splice(1, 2);

fish;
Output
[ 'piranha', 'eel' ]

في المثال السابق، قمنا بحذف عنصرين من المصفوفة ابتداء من الفهرس 1. إذا لم نقم بإدخال المعامل الثاني الذي يُمثل عدد العناصر التي نريد حذفها، سيتم حذف جميع عناصر المصفوفة ابتداءً من الفهرس 1 وحتى نهاية المصفوفة.

الإضافة والإزالة باستخدام splice()

باستخدام كافة المعاملات للوظيفة splice()، نستطيع إجراء كلتا عمليتي الإضافة والحذف في نفس الوقت.
لتوضيح هذا، لنقم بحذف نفس العناصر السابقة في المثال قبل السابق واضافة العنصر الجديد في الفهرس 1:

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items and add one
fish.splice(1, 2, "manta ray");

fish;
Output
[ 'piranha', 'manta ray', 'eel' ]

الوظيفة splice() تُعتبر وظيفة قوية في إجراء التعديلات على أي مصفوفة. انتبه أن لا يكون لديك لبس بين الوظيفة splice() والوظيفة slice() التي تُعتبر وظيفة من توابع الوصول وتقوم بإنشاء نسخة من جزء من مصفوفة.

الوظيفة reverse()

تقوم هذه الوظيفة بعكس ترتيب العناصر في المصفوفة.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

باستخدام الوظيفة reverse()، فإن العنصر الأخير سيكون الأول، والعنصر الأول سيكون اّخر العناصر، ولا تأخذ هذه الوظيفة أي معاملات.

// Reverse the fish array
fish.reverse();

fish;
Output
[ 'eel', 'koi', 'barracuda', 'piranha' ]

الوظيفة fill()

تقوم الوظيفة fill() باستبدال جميع عناصر المصفوفة بقيمة ثابتة.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

لنفترض وجود المصفوفة fish ولتحتوي على 4 عناصر، باستخدام الوظيفة fill() سنستبدل جميع العناصر الأربعة بقيمة واحدة:

// Replace all values in the array with "shark"
fish.fill("shark");

fish;
Output
[ 'shark', 'shark', 'shark', 'shark' ]

نستطيع أن نمرر للوظيفة fill() معاملين إضافيين وكلاهما اختياري، ويمثلان فهرس البداية الذي نبدأ من عنده عملية الاستبدال وفهرس النهاية الذي ننهي عملية الاستبدال قبله.

fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]

الوظيفة sort()

الوظيفة sort() تقوم بترتيب عناصر المصفوفة بناءً على الحرف الأول في العنصر. في حالة وجود أكثر من عنصر بنفس الحرف الأول، يتم الترتيب بناءً على الحرف الثاني وهكذا.
بشكل تلقائي تقوم الوظيفة بالترتيب الأبجدي لمصفوفة نصية والتي يكون جميع عناصرها إما uppercase أو lowercase.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Sort items in array
fish.sort();

fish;
Output
[ 'barracuda', 'eel', 'koi', 'piranha' ]

بما أن الوظيفة sort() تعتمد على الترميز النصي للحرف الأول، فإنها ستُرتب العناصر التي تكون حالتها uppercase قبل العناصر التي حالتها lowercase. انظر للمثال التالي:

let fish = [ "piranha", "barracuda", "Koi", "eel" ];

fish.sort();

fish;
Output
[ 'Koi', 'barracuda', 'eel', 'piranha' ]

الأرقام تأتي قبل الأحرف بغض النظر عن حالتها في ترتيب المصفوفة. انظر للمثال التالي:

let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];

fish.sort();
Output
[ '1 eel', 'Koi', 'barracuda', 'piranha' ]

لن تقوم الوظيفة بترتيب مصفوفة أعداد حسب قيمة الأعداد فيها (الأصغر ثم الأكبر)، ولكنها ستقوم بفحص الرقم الأول في كل عدد ويتم الترتيب بناءً عليه.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

numbers.sort();
Output
[ 15, 16, 23, 4, 42, 8 ]

لترتيب الأعداد في مصفوفة أعداد بطريقة سليمة وحسب قيمة الأعداد (من الأصغر إلى الأكبر)، نستطيع إنشاء وظيفة “مقارنة” ونمررها كمعامل للوظيفة sort():

// Function to sort numbers by size
const sortNumerically = (a, b) => {
  return a - b;
}

numbers.sort(sortNumerically);
Output
[ 4, 8, 15, 16, 23, 42 ]

خاتمة

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

 

ترجمة -وبتصرّف- للمقال How To Use Array Methods in JavaScript Mutator Methods لصاحبه Tania Rascia

حقوق الصورة البارزة محفوظة لـ Freepik





تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن