تتكون المصفوفة في الجافا سكريبت من قائمة عناصر، وتحتوي الجافا سكريبت على العديد من الوظائف المرفقة والتي تعمل على المصفوفات. الوظائف التي تقوم بالتعديل عل المصفوفة الأصلية تُعرف بتوابع التعديل (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
- 1
- 1
أفضل التعليقات
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.