البحث في الموقع

مقدمة تُعتبر المصفوفة في الجافا سكريبت كائن عمومي (global) الغرض منه هو تخزين البيانات، وتحتوي المصفوفة إما على مجموعة من العناصر بنوع بيانات واحد أو أكثر، وقد تكون فارغة. نستخدم الفهارس العددية التي تبدأ من القيمة 0 للوصول إلى عناصر المصفوفة. المصفوفات مفيدة جدًا بما أنها تُخزن عدة قيم في متغير واحد، وهذا الأمر يقلل وينظم الشيفرة البرمجية التي نكتبها ويجعلها أكثر ملائمة للقراءة والصيانة. تستطيع المصفوفة أن تحتوي على أي نوع بيانات، ابتداءً من الأرقام ومرورا بالنصوص والكائنات وغيرها من أنواع البيانات. لتوضيح كيف من الممكن أن تكون المصفوفات مهمة، لنفترض أننا نريد أن نحفظ أسماء المحيطات في متغيرات عدة، بحيث يكون لكل محيط المتغير الخاص به: oceans.js // Assign the five oceans to five variables const ocean1 = "Pacific"; const ocean2 = "Atlantic"; const ocean3 = "Indian"; const ocean4 = "Arctic"; const ocean5 = "Antarctic"; هذه الطريقة مُضجرة جدا، وتُصبح أكثر صعوبة بشكل متسارع في المتابعة والصيانة. باستخدام المصفوفات، نستطيع تبسيط الأمر. oceans.js // Assign the five oceans let oceans = [ "Pacific", "Atlantic", "Indian", "Arctic", "Antarctic", ]; بدلًا من استخدام خمسة متغيرات منفصلة، نستطيع الان أن يكون لدينا متغير واحد يحتوي على جميع العناصر الخمسة. لإنشاء المصفوفة، نستخدم الأقواس المربعة [ ] كما هو واضح في الشيفرة البرمجية السابقة، وللوصول إلى عنصر معين في المصفوفة، نستخدم الفهرس مع المصفوفة بالطريقة التالية: // Print out the first item of the oceans array oceans[0]; Output Pacific في هذا الدرس سنتعلم كيفية بناء المصفوفة، وكيفية الوصول إلى عناصرها، والاضافة إليها وتعديلها والحذف منها، كما سنتعلم كيفية المرور خلال عناصرها باستخدام حلقة التكرار. إنشاء مصفوفة يوجد طريقتان لإنشاء المصفوفة في جافا سكريبت: التعريف اللفظي باستخدام الأقواس المعكوفة. التعريف بواسطة الباني (constructor) باستخدام كلمة new. لنوضح كيفية إنشاء مصفوفة تحتوي على أنواع سمك القرش، وذلك باستخدام التعريف اللفظي بواسطة الأقواس المربعة: sharks.js // Initialize array of shark species with array literal let sharks = [ "Hammerhead", "Great White", "Tiger", ]; الان نُعرف نفس المصفوفة باستخدام الباني وذلك بواسطة الجملة new Array() : sharks.js // Initialize array of shark species with array constructor let sharks = new Array( "Hammerhead", "Great White", "Tiger", ); كلا الطريقتين سوف يُنشئ لنا المصفوفة، ولكن طريقة التعريف اللفظي هي المشهورة والأكثر تفضيلا بما أن التعريف باستخدام الباني قد يؤدي إلى نتائج غير مستقرة وغير متوقعة وعليك الانتباه في حال صادفتك تلك الطريقة في التعريف أو في حال استخدامك لها. نستطيع طباعة محتويات المصفوفة بكتابة المتغير الخاص بها مباشرة: // Print out the entire sharks array sharks; Output [ 'Hammerhead', 'Great White', 'Tiger' ] تُستخدم المصفوفات عادة في تجميع العناصر أو القوائم من نفس نوع البيانات، ولكن من الناحية التقنية، فإن المصفوفات تستطيع أن تحتوي على عناصر من أنواع مختلفة بالإضافة إلى إمكانية أن تحتوي على مصفوفات أخرى: // Initialize array of mixed datatypes let mixedData = [ "String", null, 7, [ "another", "array", ], ]; بعد أن تعلمنا كيفية إنشاء المصفوفة، نستطيع الان التعامل معا بأكثر من طريقة، ولكننا في البداية نحتاج الى فهم كيفية فهرسة المصفوفات (Arrays Indexing). ملاحظة: قد تجد اخر عنصر في المصفوفة ينتهي بفاصلة وأحيانا قد لا تجد هذه الفاصلة. تُعرف هذه الفاصلة بالفاصلة التابعة (Trailing comma)، ومن الشائع ان تكون غير موجودة، ولكن بشكل عام أصبح من الأفضل أن يتم استخدامها في الشيفرة البرمجية بسبب أنها تجعل الاختلافات بين الإصدارات (في عملية إدارة الإصدارات Versions Control) أكثر وضوحا وتسهل من إضافة وإزالة عناصر المصفوفة دون أخطاء. لاحظ أن الفاصلة التابعة غير مسموح بها في ملفات JSON. فهرسة المصفوفات إذا تعاملت مسبقاً مع النصوص والفهرسة في الجافا سكريبت، ستكون مُلمًا بمفهوم فهرسة المصفوفات، حيث أن النص يُعتبر شبيهًا بالمصفوفة. لا تحتوي المصفوفات على عناصر مزدوجة على شكل اسم/قيمة، وبدلا من ذلك، فإن المصفوفات تُفهرس بقيم عددية تبدأ من القيمة 0. المثال التالي ينشئ مصفوفة باسم seaCreatures: seacreatures.js let seaCreatures = [ "octopus", "squid", "shark", "seahorse", "starfish", ]; الجدول التالي يُفصل كيف يتم فهرسة كل عنصر في المصفوفة بقيمة عددية ابتداءً من 0: octopus squid shark seahorse starfish 0 1 2 3 4 العنصر الأول في المصفوفة هو octopus ومُفهرس في الموقع 0 من المصفوفة، والعنصر الأخير هو starfish ومُفهرس في الموقع 4. تبدأ الفهرسة من 0، وهذا يتضارب مع طبيعتنا الفطرية ببدء العد من القيمة 1، لذلك نحتاج لأخذ الاحتياط وأن نتذكر هذه النقطة دائما حتى تصبح طبيعية. نستطيع أن نحصل على عدد العناصر في المصفوفة باستخدام الخاصية length: seaCreatures.length; Output 5 على الرغم من أن الفهارس الخاصة بالمصفوفة seaCreatuers تبدأ من 0 إلى 4، فإن الخاصية length سوف تُرجع العدد الفعلي للعناصر الموجودة في المصفوفة. إذا أردنا معرفة رقم الفهرس لعنصر معين في المصفوفة، وليكن مثلا seahorse، نستطيع أن نستخدم لذلك الوظيفة indexOf() : seaCreatures.indexOf("seahorse"); Output 3 إذا لم تحتوي المصفوفة على العنصر الذي نريده، فلن نحصل على رقم فهرس لعنصر غير موجود، وفي هذه الحالة، فإن الوظيفة سترجع لنا القيمة -1 كما في المثال التالي: seaCreatures.indexOf("cuttlefish"); Output -1 بواسطة أرقام الفهارس المرتبطة بعناصر المصفوفة، فإنه لدينا القدرة على الوصول لكل عنصر بشكل منفرد بهدف العمل على هذا العنصر والتعامل معه. الوصول لعناصر المصفوفة يتم الوصول لعنصر في مصفوفة جافا سكريبت بواسطة الإشارة لرقم الفهرس للعنصر بين قوسين معكوفين: seaCreatures[1]; Output squid نعلم أن الرقم 0 سيعيد لنا دائما العنصر الأول في المصفوفة. كذلك نستطيع إيجاد العنصر الأخير في المصفوفة بواسطة إجراء عملية طرح قيمة 1 من قيمة الخاصية length للمصفوفة، والإشارة لناتج هذه العملية كرقم فهرس للعنصر الأخير كما هو موضح في المثال التالي: const lastIndex = seaCreatures.length - 1; seaCreatures[lastIndex]; Output starfish محاولة الوصول لعنصر غير موجود سيعيد لنا undefined: seaCreatures[10]; Output undefined للوصول لعنصر مصفوفة متداخلة (مصفوفة داخل مصفوفة)، فعلينا إضافة فهرس اخر يعود للمصفوفة الداخلية: let nestedArray = [ [ "salmon", "halibut", ], [ "coral", "reef", ] ]; nestedArray[1][0]; Output coral في المثال السابق، قمنا بالوصول للعنصر coral بالإشارة لرقم الفهرس الذي يحتوي المصفوفة الداخلية وهو 1، ثم أشرنا للفهرس الذي يحتوي على العنصر في المصفوفة الداخلية وهو 0. إضافة عنصر لمصفوفة في المتغير seaCreatuers يوجد لدينا 5 عناصر بأرقام فهراس تبدأ من 0 الى 4. إذا أردنا أن نُضيف عنصر جديد لهذه المصفوفة، فيمكننا أن نقوم بذلك بإعطاء قيمة للفهرس التالي الذي يلي اخر فهرس: seaCreatures[5] = "whale"; seaCreatures; Output [ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale' ] إذا قمنا بإضافة عنصر وتجاهلنا قيمة الفهرس التالي ووضعنا بدلا منه فهرس بقيمة 7 مثلا، فإن ذلك يؤدي لإضافة عنصر غير مُعرف (undefined) للمصفوفة كما في المثال التالي: seaCreatures[7] = "pufferfish"; seaCreatures; Output [ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish' ] هذه المشكلة نستطيع تجنبها باستخدام الوظيفة push() والتي تقوم بإضافة العنصر الجديد في نهاية المصفوفة: // Append lobster to the end of the seaCreatures array seaCreatures.push("lobster"); seaCreatures; Output [ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', , 'whale', 'pufferfish', 'lobster' ] على العكس تماما من الوظيفة push()، فإن الوظيفة unshift() تقوم بإضافة العنصر في بداية المصفوفة: // Append dragonfish to the beginning of the seaCreatures array seaCreatures.unshift("dragonfish"); seaCreatures; Output [ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish', 'lobster' ] باستخدام الوظيفتين السابقتين، ستكون لديك المقدرة على إضافة عناصر جديدة للمصفوفة إما في بدايتها، أو نهايتها. إزالة عنصر من مصفوفة لإزالة عنصر معين من مصفوفة، نستخدم الوظيفة splice(). في المصفوفة seaCreatuers قمنا بإضافة عنصر غير مُعرف وليس له قيمة، ولإزالته نقوم بالتالي: seaCreatures.splice(7, 1); seaCreatures; Output [ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish', 'lobster' ] في الوظيفة splice()، المُعامل الأول يشير لرقم الفهرس الذي سنبدأ بالإزالة من عنده (في هذه الحالة 7)، والمُعامل الثاني يشير لعدد العناصر التي نرغب بإزالتها (في حالتنا سيكون 1 حيث أننا نرغب بإزالة عنصر واحد). الوظيفة splice() ستؤثر على المتغير الأصلي. لذلك، إذا أردنا أن نحافظ على المصفوفة الأصلية دون تغيير، نستخدم الوظيفة slice() ونعطي القيمة الناتجة عنها لمتغير جديد. let newArray = slice(7, 1); الوظيفة pop() ستزيل العنصر الأخير من المصفوفة: // Remove the last item from the seaCreatures array seaCreatures.pop(); seaCreatures; Output [ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ] العنصر lobster أُزيل من المصفوفة لأنه العنصر الأخير، ولإزالة العنصر الأول في المصفوفة، نستخدم الوظيفة shift(): // Remove the first item from the seaCreatures array seaCreatures.shift(); seaCreatures; Output [ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ] باستخدام الوظيفتين pop() و shift() نستطيع إزالة العناصر من بداية المصفوفة أو نهايتها. يُفضل استخدام الوظيفة pop() قدر الإمكان، حيث أن باقي العناصر في المصفوفة تبقى في مواقعها دون تغيير. تعديل العناصر في المصفوفة نستطيع تغيير أي قيمة عنصر في المصفوفة وذلك بإعطاء القيمة الجديدة للعنصر باستخدام عملية المساواة، كما نفعل تماما عند التعامل مع المتغيرات العادية: // Assign manatee to the first item in the seaCreatures array seaCreatures[0] = "manatee"; seaCreatures; Output [ 'manatee', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ] طريقة أخرى لتغيير قيمة العنصر باستخدام الوظيفة splice() وذلك بإضافة مُعامل جديد. فمثلا، إذا أردنا تغيير قيمة العنصر seahorse والذي يقع في الفهرس 3، نستطيع إزالته وإضافة قيمة جديدة بدلا منه: // Replace seahorse with sea lion using splice method seaCreatures.splice(3, 1, "sea lion"); seaCreatures(); Output [ 'manatee', 'squid', 'shark', 'sea lion', 'starfish', 'whale', 'pufferfish' ] في المثال السابق، قمنا بإزالة العنصر seahorse من المصفوفة، ووضعنا بدلا منه القيمة sea lion في نفس الفهرس 3. حلقة التكرار خلال المصفوفة نستطيع المرور على عناصر المصفوفة من خلال حلقة تكرار for وذلك بالاستفادة من خاصية length. في المثال التالي، نُنشئ مصفوفة باسم shellfish ونطبع رقم كل فهرس فيها بالإضافة إلى قيمة العنصر المرتبط بالفهرس: // Create an array of shellfish species let shellfish = [ "oyster", "shrimp", "clam", "mussel", ]; // Loop through the length of the array for (let i = 0; i < shellfish.length; i++) { console.log(i, shellfish[i]); } Output 0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel' نستطيع أيضا استخدام حلقة التكرار for…of وهي خاصية جديدة في الجافا سكريبت: // Create an array of aquatic mammals let mammals = [ "dolphin", "whale", "manatee", ]; // Loop through each mammal for (let mammal of mammals) { console.log(mammal); } Output dolphin whale manatee حلقة التكرار for…of لا تقوم باستخدام رقم الفهرس للعناصر في المصفوفة، ولكنها بشكل عام طريقة أبسط وأكثر اختصارا للمرور على المصفوفة من خلال حلقة التكرار. استخدام حلقات التكرار مفيد بشكل كبير في طباعة قيم عناصر المصفوفة وهو يشبه عرض العناصر من قاعدة بيانات خلال موقع الكتروني. خاتمة تُعتبر المصفوفات جزء أساسي ومهم في برمجة الجافا سكريبت. في هذا الدرس تعلمنا كيفية إنشاء المصفوفة، وكيفية فهرستها، وتعلمنا إجراء بعض العمليات المهمة على المصفوفات مثل إزالة العناصر والتعديل عليها. وكذلك تعلمنا طريقتين للمرور على عناصر المصفوفة من خلال حلقات التكرار والتي تهدف لإجراء عمليات على عناصر المصفوفة مثل طباعة محتوياتها وطباعة أرقام الفهارس. ترجمة -وبتصرّف- للمقال Understanding Arrays in JavaScript لصاحبه Tania Rascia حقوق الصورة البارزة محفوظة لـ Freepik

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

المصفوفة في جافا سكريبت هي نوع من أنواع البيانات المتاحة فيها وتتكون من قائمة من العناصر. تحتوي الجافا سكريبت على العديد من الوظائف المُرفقة والتي تعمل على المصفوفات. الوظائف التي تقوم بالتعديل على المصفوفة الأصلية تُعرف بتوابع التعديل (Mutator Methods)، والوظائف التي تُعيد قيمة جديدة أو شكلًا آخر من المصفوفة تُعرف بتوابع الوصول (Accessor Methods). في هذا المقال سنتحدث عن توابع الوصول. للاستفادة أكثر من هذا الدرس، يجب أن يكون لديك معرفة مسبقة بكيفية إنشاء المصفوفات، فهرستها، التعديل عليها والمرور على عناصرها بواسطة حلقة التكرار. تستطيع مراجعة درس فهم المصفوفات في الجافا سكريبت لأخذ فكرة عما سبق. هذا الدرس يوضح كيفية دمج المصفوفات ببعضها، تحويل المصفوفات الى نصوص، نسخ أجزاء من مصفوفة وحفظها كمصفوفة جديدة بالإضافة لتحديد فهارس المصفوفة. الوظيفة ()concat تقوم الوظيفة ()concat بدمج مصفوفتين أو أكثر ببعضها البعض لينتج لدينا مصفوفة جديدة. في المثال التالي نقوم بإنشاء مصفوفتين تحتويان على أنواع الأسماك الصدفية ومن ثم نقوم بدمجهما في مصفوفة واحدة. // Create arrays of monovalves and bivalves let monovalves = [ "abalone", "conch" ]; let bivalves = [ "oyster", "mussel", "clam" ]; // Concatenate them together into shellfish variable let shellfish = monovalves.concat(bivalves); بمجرد استدعائنا للمصفوفة الجديدة، سنرى أنها تحتوي على العناصر الموجودة في كلا المصفوفتين السابقتين. shellfish; Output [ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ] نستطيع تمرير أكثر من مُعطى للوظيفة ()concate لتسمح لنا بكفاءة وبخطوة واحدة أن ندمج مجموعة مصفوفات ببعضها البعض. الوظيفة ()join تقوم الوظيفة ()join بتحويل جميع عناصر مصفوفة معينة إلى قيمة نصية. في المثال التالي، تقوم الوظيفة بعملية تحويل عناصر المصفوفة fish الى قيمة نصية. لاحظ أنه بدون أن نُمرر أي معطى للوظيفة ()join سيتم فصل عناصر المصفوفة عن بعضها بواسطة فاصلة عادية وذلك في القيمة النصية الناتجة. let fish = [ "piranha", "barracuda", "koi", "eel" ]; // Join the elements of an array into a string let fishString = fish.join(); fishString; Output 'piranha,barracuda,koi,eel' اذا أردنا أن يتم فصل العناصر عن بعضها البعض بواسطة مسافة أو أي فاصل اخر، فعلينا أن نضيف الفاصل الذي نرغب به كمُعطى للوظيفة ()join. // Join the elements of an array into a string let fishString = fish.join(', '); fishString; Output 'piranha, barracuda, koi, eel' في المثال السابق، مررنا الفاصل ‘, ’ الذي يحتوي على فاصلة عادية ومسافة وذلك لفصل عناصر المصفوفة ولكي نحصل على نص مقروء بطريقة أفضل. في حالة قمنا بتمرير فاصل فارغ للوظيفة ()join، فإن الفاصلة التلقائية سيتم ازالتها بالكامل. الوظيفة ()slice نستخدم الوظيفة ()slice لنسخ أجزاء من مصفوفة إلى مصفوفة أخرى جديدة. let fish = [ "piranha", "barracuda", "koi", "eel" ]; لنفترض أننا نربد نسخ أخر عنصرين في المصفوفة fish الى مصفوفة جديدة، فإننا سنبدأ بالنسخ من الفهرس 2 الذي يمثل موقع العنصر “koi” وسينتهي النسخ عند رقم الفهرس الذي يلي فهرس أخر عنصر نريد نسخه. بما أن فهرس أخر عنصر “eel” هو 3، فإننا سنمرر للمعطى الثاني القيمة 4. // Slice a new array from 2 to 5 let fishWithShortNames = fish.slice(2, 4); fishWithShortNames; Output [ 'koi', 'eel' ] في هذه الحالة الخاصة، وبسبب أن العنصر “eel” هو أخر عنصر في المصفوفة، فإن المُعطى الأخير في الوظيفة ()slice غير ضروري، حيث أن النسخ سيبدأ من فهرس البداية وينتهي لنهاية المصفوفة عند عدم تمرير المعطى الثاني. // Slice a new array from 2 to the end of the array let fishWithShortNames = fish.slice(2); fishWithShortNames; Output [ 'koi', 'eel' ] انتبه ألا يختلط عليك الأمر مع وظيفة توابع التعديل المسماة ()splice والتي تقوم بإضافة أو حذف العناصر من المصفوفة الأصلية. الوظيفة ()indexOf تُعيد هذه الوظيفة رقم الفهرس لأول وجود لعنصر معين في مصفوفة، وتظهر فائدة هذه الوظيفة بشكل واضح في المصفوفات التي تحتوي قيم عديدة ومتكررة. في المثال التالي، يتكرر وجود العنصر”barracuda” مرتين في المصفوفة fish. let fish = [ "piranha", "barracuda", "koi", "barracuda" ]; باستخدام الوظيفة ()indexOf نستطيع الحصول على موقع العنصر الأول من القيمة “barracuda”. // Find the first instance of an element fish.indexOf("barracuda"); Output 1 إذا قمنا بتمرير قيمة غير موجودة في المصفوفة فإن نتيجة الوظيفة ستكون القيمة الخاصة -1. fish.indexOf("shark"); Output -1 الوظيفة ()lastIndexOf تُعيد هذه الوظيفة رقم الفهرس للوجود الأخير لعنصر معين في مصفوفة. نستطيع اختبار هذه الوظيفة على نفس المثال السابق الذي يحتوي على تكرار القيمة “barracuda” مرتين. let fish = [ "piranha", "barracuda", "koi", "barracuda" ]; // Find the last instance of an element fish.lastIndexOf("barracuda"); Output 3 الوظيفة ()lastIndexOf تبدأ بالبحث عن العنصر ابتداءً من نهاية المصفوفة وبذلك فهي فعليًا تعيد فهرس أول عنصر تجده أثناء عملية البحث. خاتمة من خلال هذا الدرس قمنا بمراجعة وظائف توابع الوصول المرفقة مع مصفوفات الجافا سكريبت. توابع الوصول تقوم بإنشاء نسخة جديدة من المصفوفة بعكس توابع التعديل التي تقوم بتغيير المصفوفة الأصلية. تعلمنا كيفية دمج مصفوفتين أو أكثر، تحويل عناصر المصفوفة الى مجموعة قيم نصية مُجزأة بفاصلة عادية بالإضافة الى كيفية نسخ أجزاء من المصفوفة الى مصفوفة جديدة. وفي النهاية تعلمنا كيفية الحصول على فهرس أول وجود لعنصر أو أخر وجود له في مصفوفة معينة. لمراجعة أساسيات المصفوفات، راجع درس فهم المصفوفات في الجافا سكريبت. ترجمة -وبتصرّف- للمقال How To Use Array Methods in JavaScript Mutator Methods لصاحبته Tania Rascia

المصفوفة في الجافا سكريبت تتكون من قائمة عناصر، وتتيح الجافا سكريبت للمبرمجين العديد من الوظائف التي تعمل على المصفوفات. الوظائف التي تقوم بالتعديل على المصفوفة الأصلية تُعرف بتوابع التعديل (Mutator Methods)، والوظائف التي تُعيد قيمة جديدة أو شكل آخر من المصفوفة تُعرف بتوابع الوصول (Accessor Methods). يوجد نوع ثالث من التوابع يُسمى بتوابع التكرار (Iteration Methods) والتي سنتناولها بالشرح في هذا المقال. تُتيح توابع التكرار العمل على كل عنصر في المصفوفة كلٌ على حدة، وترتبط هذه التوابع بشكل أساسي بحلقات التكرار. للاستفادة أكثر من هذا الدرس، يجب أن يكون لديك معرفة مُسبقة بكيفية إنشاء المصفوفات، فهرستها، التعديل عليها والمرور على عناصرها بواسطة حلقة التكرار. تستطيع مراجعة درس فهم المصفوفات في الجافا سكريبت لأخذ فكرة عما سبق. ما سنتناوله في هذا الدرس يشمل شرح استخدام وظائف التكرار لتنفيذ حلقة التكرار على المصفوفات وإجراء عمليات على كل عنصر في المصفوفة، توضيح كيفية ترشيح نتائج العمل على المصفوفة، تلخيص عناصر المصفوفة في قيمة واحدة والبحث عن قيم وفهارس معينة. فهم الدوال السهمية (Arrow Functions) العديد من الأمثلة في هذا المقال ستستخدم صيغة الدوال السهمية في الجافا سكريبت والتي يتم تمثيلها بواسطة علامة المساواة ثم علامة الأكبر من <=. الدالة في الجافا سكريبت عبارة عن كتلة من الشيفرة البرمجية يتم تنفيذها وإعادة استخدامها أكثر من مرة، وعادةً ما تُكتب وفق الصيغة التالية: var example = function() { // code to execute } example(); النسخة الأخيرة من الجافا السكريبت -حتى وقت كتابة هذا الدرس- تسمح باستخدام الدوال السهمية والتي تُكتب وفق الصيغة التالية: var example = () => { // code to execute } example(); في الدوال السهمية تُكتب الأقواس لاستقبال معاملات الدالة. في حالة كان لدينا مُعامل واحد فقط فنستطيع حينها التخلي عن كتابة الأقواس كما في الصيغة التالية: var example = parameter1 => { // code to execute } سنعتمد في شرح هذا الدرس على الدوال السهمية، وللاطلاع أكثر على هذا الموضوع، تستطيع الذهاب الى هذا المرجع . الوظيفة ()forEach تقوم الوظيفة ()forEach باستدعاء دالة ليتم تنفيذها على كل عنصر في مصفوفة معينة. فمثلًا، نفترض وجود المصفوفة fish بالعناصر التالية: let fish = [ "piranha", "barracuda", "cod", "eel" ]; نستطيع استخدام الوظيفة ()forEach لطباعة كل عنصر في المصفوفة fish على الطرفية: // Print out each item in the array fish.forEach(individualFish => { console.log(individualFish); }) Output piranha barracuda cod eel يوجد طريقة أخرى لعمل ما سبق وذلك باستخدام جملة التكرار for بالإضافة لاستخدام الخاصية length: // Loop through the length of the array for (let i = 0; i < fish.length; i++) { console.log(fish[i]); } استخدام جملة for السابقة في طباعة كل عنصر على حدة يعطينا نفس النتيجة عند استخدام ()forEach، ولكن استخدام الطريقة ()forEach يُعتبر خيارًا مختصرًا ومباشرًا وأفضل لمثل هذه الحالات. الوظيفة ()map تقوم الوظيفة ()map ببناء مصفوفة ناتجة عن استدعاء دالة على عناصر مصفوفة أخرى. نستطيع طباعة عناصر مصفوفة عنصر-عنصر كمثال توضيحي على كيفية استخدام وظيفة ()map ولكن على العكس من الوظيفة ()forEach، لابد من حفظ ناتج الوظيفة في متغير جديد. let fish = [ "piranha", "barracuda", "cod", "eel" ]; // Print out each item in the array let printFish = fish.map(individualFish => { console.log(individualFish); }); printFish; Output piranha barracuda cod eel مثال أخر على استخدام الوظيفة ()map، حيث نستطيع أيضًا أن نُغير قيمة كل عنصر في مصفوفة وحفظ العناصر الجديدة الناتجة عن هذا التغيير في مصفوفة أخرى. فمثلًا، يمكننا إضافة الحرف s الى نهاية كل عنصر في المصفوفة fish لجعل الأسماء أسماء جمع. // Pluralize all items in the fish array let pluralFish = fish.map(individualFish => { return `${individualFish}s`; }); pluralFish; Output [ 'piranhas', 'barracudas', 'cods', 'eels' ] المصفوفة الأصلية fish لم تتغير، ولكن المصفوفة الجديدة pluralFish أصبحت الان تحتوي على النسخة المُعدلة من المصفوفة الأصلية. الوظيفة ()filter تقوم الوظيفة ()filter بإنشاء مصفوفة جديدة تحتوي على عناصر من المصفوفة الأصلية تتوافق مع شرط معين. الهدف الرئيسي من هذه الوظيفة هو إجراء عملية الترشيح، فمثلًا، نستطيع أن نحصل من الوظيفة ()filter على مصفوفة جديدة تحتوي على العناصر التي تبدأ بحرف مُعين، وذلك بالاستفادة من خاصية فهرسة النصوص التي تُمكننا من الحصول على الحرف الأول لكل عنصر. let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ]; // Filter all creatures that start with "s" into a new list let filteredList = seaCreatures.filter(creature => { return creature[0] === "s"; }); filteredList; Output [ 'shark', 'squid', 'starfish' ] في المثال السابق اختبرنا جميع العناصر التي تبدأ بالحرف s وحفظنا النتيجة في مصفوفة جيدة باسم filteredList. الوظيفة ()reduce تقوم الوظيفة ()reduce باختصار مصفوفة في قيمة واحدة، وعادةً يُرى هذا الاستخدام مع المصفوفات التي تحتوي على أرقام، مثل الحصول على مجموع عناصر مصفوفة: let numbers = [ 42, 23, 16, 15, 4, 8 ]; // Get the sum of all numerical values let sum = numbers.reduce((a, b) => { return a + b; }); sum; Output 108 تُستخدم الوظيفة ()reduce أيضًا مع النصوص وأنواع البيانات الأخرى، وتكون القيمة المُرجعة من الوظيفة إما رقم أو نص أو أي نوع بيانات أخر. الوظيفة ()find تُعيد الوظيفة ()find أول عنصر من مصفوفة يتوافق مع شرط مُعين. لتوضيح ذلك، سوف نُنشئ مصفوفة تحتوي على أسماء مخلوقات بحرية، وسنستخدم الوظيفة ()find في إيجاد المخلوقات البحرية ذات النوع الرخوي مثل الأخطبوط (من الرخويات). let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ]; // Check if a given value is a cephalopod const isCephalopod = cephalopod => { return [ "cuttlefish", "octopus" ].includes(cephalopod); } seaCreatures.find(isCephalopod); Output Octopus بما أن “octopus” هو العنصر الأول في المصفوفة seaCreatures الذي ينطبق عليه الشرط، فإنه هو القيمة الأولى التي تم إرجاعها. نستفيد من الوظيفة ()find في عملنا مع المصفوفات التي تحتوي على قيمة عديدة. الوظيفة ()findIndex تُعيد الوظيفة ()findIndex فهرس أول عنصر من مصفوفة يتوافق مع شرط مُعين. سنستخدم نفس المثال السابق في وظيفة ()find لإيجاد فهرس أول عنصر من المصفوفة من النوع الرخوي. let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ]; باستخدام المصفوفة isCephalopod مع الوظيفة ()findIndex سنحصل على رقم الفهرس للعنصر بدلا من قيمته. // Check if a given value is a cephalopod const isCephalopod = cephalopod => { return [ "cuttlefish", "octopus" ].includes(cephalopod); } seaCreatures.findIndex(isCephalopod); Output 1 العنصر “octopus” هو العنصر الأول من المصفوفة الذي ينطبق عليه الشرط وموقعه في الفهرس رقم 1 وهي القيمة التي حصلنا عليها. في حالة لم ينطبق الشرط على أية عنصر في المصفوفة، فإن القيمة المرجعة هي -1. const isThereAnEel = eel => { return [ "eel" ].includes(eel); } seaCreatures.findIndex Output -1 خاتمة في هذا الدرس قمنا بمراجعة أغلب وظائف توابع التكرار في الجافا سكريبت. وظائف التكرار تعمل على كل عنصر في المصفوفة كلٌ على حدة وغالبًا ما يتم تطبيق دالة جديدة معها. تم شرح كيفية المرور على المصفوفة وعناصرها من خلال حلقة تكرار، تغيير قيمة العنصر في المصفوفة، ترشيح المصفوفة، اختصار المصفوفة في قيمة واحدة والبحث في المصفوفة باستخدام قيم العناصر او فهارسها. لأخذ فكرة عن المصفوفات تستطيع الاطلاع على درس فهم المصفوفات في الجافا سكريبت . ترجمة -وبتصرّف- للمقال How To Use Array Methods in JavaScript: Iteration Methods لصاحبته Tania Rascia حقوق الصورة البارزة محفوظة لـ Freepik