15 طرق JavaScript للتعامل مع المصفوفات التي تحتاج إلى معرفتها في عام 2020

فيما يلي ترجمة لمقال نشر على موقع dev.to. بواسطة: ابراهيم نداو .
تم نشر النسخة الأصلية في مدونة المؤلف.

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

في هذه المقالة ، سنغطي 15 طريقة من شأنها مساعدتك في العمل بكفاءة أكبر مع الصفائف في JavaScript.



يرجى ملاحظة أننا سنعمل على تبسيط الوظيفة التي يتم تمريرها كمعلمة.

// Instead of using this way myAwesomeArray.some(test => { if (test === "d") { return test } }) // We'll use the shorter one myAwesomeArray.some(test => test === "d") 

1. بعض ()

يتحقق هذا الأسلوب مما إذا كان أي عنصر من الصفيف يفي بالشرط المحدد في الدالة التي تم تمريرها. ستعود true إذا كان عنصر واحد على الأقل يطابق الوظيفة التي يتم اختبارها ، ويكون false إذا لم يكن كذلك.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true 

2. تقليل ()

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

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120 

3. كل ()

تتحقق هذه الطريقة مما إذا كانت جميع عناصر المصفوفة تفي بالشرط المحدد في الوظيفة التي يتم تمريرها. سيعود true إذا تطابق كل عنصر مع الوظيفة التي يجري اختبارها ، false إن لم يكن.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") //-------> Output : false const myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Output : true 

4. خريطة ()

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

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) //-------> Output : 25 // 16 // 9 // 4 // 1 

5. شقة ()

تأخذ هذه الطريقة مجموعة من المصفوفات كوسيطة وتنعيم المصفوفات المتداخلة في صفيف المستوى الأعلى. يرجى ملاحظة أن هذه الطريقة تعمل فقط لمستوى واحد.

 const myAwesomeArray = [[1, 2], [3, 4], 5] myAwesomeArray.flat() //-------> Output : [1, 2, 3, 4, 5] 

6. مرشح ()

تأخذ هذه الطريقة دالة كمعلمة وتُرجع صفيفًا جديدًا يحتوي على جميع عناصر المصفوفة التي تم تمرير وظيفة المرشح لها كوسيطة ، وتقوم بإرجاعها بشكل true .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, { id: 4, name: "Mass" }, ] myAwesomeArray.filter(element => element.name === "Mass") //-------> Output : 0:{id: 3, name: "Mass"}, // 1:{id: 4, name: "Mass"} 

7. for كل ()

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

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) //-------> Output : john // Ali // Mass 

8. findIndex ()

تأخذ هذه الطريقة دالة كمعلمة ثم تطبقها على الصفيف. تقوم بإرجاع فهرس العنصر الموجود إذا كان العنصر يفي بشرط وظيفة التحقق التي تم تمريرها كوسيطة. إذا لم يكن راضيا ، –1 عاد.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.findIndex(element => element.id === 3) //-------> Output : 2 myAwesomeArray.findIndex(element => element.id === 7) //-------> Output : -1 

9. find ()

تأخذ هذه الطريقة دالة كوسيطة ثم تطبقها على الصفيف. تقوم بإرجاع قيمة العنصر الموجود في الصفيف إذا كان العنصر يفي بشرط وظيفة التحقق. خلاف ذلك ، فإنه يعود مع القيمة undefined .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.find(element => element.id === 3) //-------> Output : {id: 3, name: "Mass"} myAwesomeArray.find(element => element.id === 7) //-------> Output : undefined 

10. فرز ()

هذه الطريقة تأخذ وظيفة كمعلمة. يقوم بفرز عناصر الصفيف وإرجاعها.

 const myAwesomeArray = [5, 4, 3, 2, 1] // Sort from smallest to largest myAwesomeArray.sort((a, b) => a - b) //-------> Output : [1, 2, 3, 4, 5] // Sort from largest to smallest myAwesomeArray.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1] 

11. concat ()

تجمع هذه الطريقة بين صفيفين أو أكثر أو أكثر وتقوم بإرجاع صفيف جديد.

 const myAwesomeArray = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat(myAwesomeArray2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50] 

12. ملء ()

تملأ هذه الطريقة جميع عناصر الصفيف بنفس القيمة ، من فهرس البداية (الافتراضي 0) إلى فهرس النهاية (default array.length).

 const myAwesomeArray = [1, 2, 3, 4, 5] // The first argument (0) is the value // The second argument (1) is the starting index // The third argument (3) is the ending index myAwesomeArray.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5] 

13. يتضمن ()

تقوم هذه الطريقة بإرجاع true إذا كان الصفيف يحتوي على عنصر محدد ، و false إن لم يكن.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Output : true myAwesomeArray.includes(8) //-------> Output : false 

14. عكس ()

عكس هذا الأسلوب ترتيب العناصر في الصفيف. يصبح العنصر الأول هو الأخير ، ويصبح العنصر الأول هو الأول.

 const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() //-------> Output : ['a', 'b', 'c', 'd', 'e'] 

15. flatMap ()

تقوم هذه الطريقة بتطبيق دالة على كل عنصر من عناصر الصفيف ، ثم تقوم بتسهيل النتيجة في صفيف جديد. فهو يجمع بين طريقة flat() وطريقة map() في وظيفة واحدة.

 const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] // With .flat() and .map() myAwesomeArray.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]