15 طريقة مصفوفة جافا سكريبت يجب أن تتقنها اليوم

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

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

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

ما هي طرق المصفوفة؟

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

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

let myArray = [1,2,3]; myArray.pop();

سيطبق هذا الرمز طريقة تسمى البوب إلى الصفيف.

مثال صفيف

لكل مثال ، استخدم مصفوفة عينة سنطلق عليها صفيفي ، لأداء الطرق على. لا تتردد في سحب وحدة التحكم والرمز الخاص بك.

let myArray = [2,4,5,7,9,12,14];

ستفترض هذه الأمثلة أنك تعرف أساس ما هو JavaScript وكيف يعمل . إذا لم تكن كذلك ، فلا بأس ، فنحن جميعًا هنا لنتعلم وننمو.

حفر في هذه الطرق الخمسة عشر القوية المصفوفة!

1. Array.push ()

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

أضف الرقم 20 إلى المصفوفة بالتشغيل يدفع() ، باستخدام 20 كوسيطة.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

تحقق مما إذا كان يعمل:

console.log(myArray); [2,4,5,7,9,12,14,20]

تشغيل يدفع() أضاف التابع على myArray القيمة المعطاة في الوسيطة إلى المصفوفة. في هذه الحالة ، 20. عندما تقوم بفحص myArray في وحدة التحكم ، سترى القيمة مضافة الآن إلى نهاية المصفوفة.

2. Array.concat ()

ماذا يفعل: concat () يمكن دمج صفيفين أو أكثر في مصفوفة جديدة. لا يقوم بتعديل المصفوفات الموجودة ولكنه ينشئ مصفوفة جديدة.

يأخذ صفيفي ودمج مجموعة تسمى صفيف جديد بداخله.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

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

3. Array.join ()

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

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

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

ستخرج JavaScript سلسلة ، مع فصل كل قيمة في المصفوفة بفاصلة. يمكنك استخدام وسيطة في الدالة لتغيير الفاصل. راقبها من خلال وسيطتين: مسافة واحدة وسلسلة.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

المثال الأول هو الفضاء ، مما يجعل سلسلة يمكنك قراءتها بسهولة.

يستخدم المثال الثاني (' و ') ، وهناك شيئان يجب معرفتهما هنا.

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

4. Array.forEach ()

ماذا يفعل: لكل () (حساس لحالة الأحرف!) يؤدي وظيفة على كل عنصر في صفيفك. هذه الوظيفة هي أي وظيفة تقوم بإنشائها ، على غرار استخدام حلقة 'for' لتطبيق دالة على مصفوفة ولكن مع عمل أقل بكثير على الكود.

هناك المزيد قليلا لكل () ؛ انظر إلى بناء الجملة ، ثم نفذ وظيفة بسيطة لتوضيحها.

  
myArray.forEach(function(item){  
//code  
});

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

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

عندما تتكرر forEach () فوق المصفوفة الخاصة بك ، فإنها تطبق الكود على هذه الوسيطة. فكر في الأمر على أنه متغير مؤقت يحتفظ بالعنصر الحالي.
اخترت اسم الوسيطة ، يمكن تسميته بأي شيء تريده. عادةً ما يتم تسمية هذا بشيء يسهل فهمه ، مثل 'عنصر' أو 'عنصر'.

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

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

كانوا يستخدمون غرض في هذا المثال كمتغير ، لذلك تمت كتابة الوظيفة لإضافة 15 إلى كل قيمة عبر غرض . ثم تقوم وحدة التحكم بطباعة النتائج. هذا ما يبدو عليه في وحدة تحكم Google Chrome.

والنتيجة هي كل رقم في المصفوفة ، ولكن يضاف إليه 15!

5. Array.map ()

ماذا يفعل: خريطة() يؤدي وظيفة على كل عنصر في المصفوفة الخاصة بك ويضع النتيجة في مصفوفة جديدة.

يبدو تشغيل وظيفة على كل عنصر مثل forEach (). الفرق هنا خريطة() يخلق مجموعة جديدة عندما ركض. لا تنشئ forEach () مصفوفة جديدة تلقائيًا ، فسيتعين عليك ترميز دالة معينة للقيام بذلك.

استخدم map () لمضاعفة قيمة كل عنصر في myArray ، وضعه في مصفوفة جديدة. سترى نفس الشيء وظيفة (عنصر) بناء الجملة لمزيد من الممارسة قليلا.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

تحقق من النتائج في وحدة التحكم.

console.log(doubleArray); [4,8,10,14,18,24,28]

صفيفي لم يتغير:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

ماذا تفعل: على غرار طريقة عمل طريقة push () ، فإن unshift () يأخذ التابع المصفوفة ويضيف عنصرًا واحدًا أو أكثر إلى بداية المصفوفة بدلاً من النهاية ، ويعيد الطول الجديد للمصفوفة. ستعمل هذه الطريقة على تعديل المصفوفة الموجودة لديك.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

عند تسجيل المصفوفة في وحدة التحكم ، يجب أن ترى الرقم 0 في بداية المصفوفة.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

ماذا يفعل: الفرز هو أحد أكثر العمليات شيوعًا التي يتم إجراؤها على المصفوفة وهو مفيد للغاية. جافا سكريبت نوع() يمكن استخدام طريقة المصفوفة لفرز مصفوفة من الأرقام أو حتى سلاسل بسطر واحد فقط من التعليمات البرمجية. هذه العملية في مكانها وتعيد المصفوفة التي تم فرزها عن طريق تعديل المصفوفة الأولية. خذ مجموعة مختلفة من الأرقام لـ صفيفي هذا الوقت.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

نظرًا لأن الفرز يتم في مكانه ، فلا يتعين عليك التصريح عن متغير منفصل للمصفوفة التي تم فرزها.

console.log(myArray); [10, 12, 34, 55, 65]

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

8. Array.reverse ()

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

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

قم بتسجيل الإخراج إلى وحدة التحكم للتحقق من العملية.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

كما ترى ، تم عكس ترتيب العناصر. في السابق ، كان العنصر في الفهرس الأخير (العنصر 14 في الفهرس 6) هو الآن العنصر في الفهرس الصفري وما إلى ذلك.

9. Array.slice ()

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

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

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

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

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

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

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice ()

ماذا يفعل: لصق او جمع() هي طريقة مصفوفة مفيدة تستخدم لإزالة أو استبدال العناصر في المصفوفة في المكان. من خلال تحديد الفهرس وعدد العناصر المراد حذفها ، فإنه يعدل المصفوفة.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

في المثال أعلاه ، فإن ملف صفيفي صفيف مقسم من الفهرس 2 ويتم إزالة 3 عناصر منه. تتكون المصفوفة الآن من:

[2, 4, 12, 14]

لاستبدال العناصر بدلاً من حذفها فقط ، يمكنك تمرير أي عدد من المعلمات الاختيارية بالعناصر التي تريد استبدالها ، مثل هذا:

كيفية تنزيل مقطع فيديو من موقع ويب

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

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

فيما يلي مثال على ملف منقي() طريقة مستخدمة للحصول على تلك العناصر فقط من المصفوفة التي تقبل القسمة على 2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

في المثال أعلاه ، يتم تمرير وظيفة السهم كمعامل يأخذ كل رقم من المصفوفة الأصلية ويتحقق مما إذا كان قابلاً للقسمة على 2 باستخدام modulo ( ٪ ) و المساواة ( === ) المشغل أو العامل. إليك ما يبدو عليه الإخراج:

[2, 4, 12, 14]

12. Array.reduce ()

ماذا يفعل: خفض() هي طريقة مصفوفة تأخذ دالة مخفض وتنفذها على كل عنصر مصفوفة لإخراج قيمة واحدة أثناء الإرجاع. إنها تأخذ وظيفة مخفض مع متغير تراكمي ومتغير عنصر حالي كمعلمات مطلوبة. يتم تذكر قيمة المُجمّع عبر جميع التكرارات ويتم إرجاعها في النهاية بعد التكرار النهائي.

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

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

يتم تمرير 0 كمعامل ثاني في المثال أعلاه ، والذي يتم استخدامه كقيمة أولية لمتغير المجمع. ال مجموع الأرقام سيحتوي المتغير على القيمة المرجعة لـ خفض() التي من المتوقع أن تكون مجموع كل العناصر في المصفوفة.

console.log(sumOfNums); 53

13. Array.includes ()

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

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

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

true  
false  
true  
false

14. Array.indexOf ()

ماذا يفعل: دليل ل() يتم استخدام الطريقة لاكتشاف الفهرس الذي يمكن فيه العثور على التواجد الأول لعنصر محدد في المصفوفة. على الرغم من أنها تشبه طريقة include () ، إلا أن هذه الطريقة تُرجع الفهرس العددي أو -1 إذا لم يكن العنصر موجودًا في المصفوفة.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

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

1  
-1  
4

15. Array.fill ()

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

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

عند تسجيل الإخراج إلى وحدة التحكم ، سترى:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

الخطوات التالية في رحلة JavaScript الخاصة بك

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

بينما تستمر في تعلم JavaScript ، MDN هو مصدر عظيم للحصول على وثائق مفصلة. احصل على الراحة في وحدة التحكم ، ثم ارتقِ بمهاراتك مع أفضل برامج تحرير JavaScript للمبرمجين. هل أنت جاهز لبناء موقع الويب الخاص بك باستخدام JavaScript؟ لماذا لا تلقي نظرة على بعض الأطر التي يمكنك وضعها في الاعتبار.

يشارك يشارك سقسقة بريد الالكتروني 6 أطر عمل جافا سكريبت تستحق التعلم

هناك العديد من أطر عمل JavaScript للمساعدة في التطوير. إليك بعض ما يجب أن تعرفه.

اقرأ التالي مواضيع ذات صلة

برمجة
جافا سكريبت
نصائح الترميز

نبذة عن الكاتب نيتين رانجاناث(31 مقالة منشورة)

نيتين هو مطور برمجيات متحمس وطالب هندسة كمبيوتر يطور تطبيقات الويب باستخدام تقنيات جافا سكريبت. يعمل كمطور ويب مستقل ويحب الكتابة لنظام Linux والبرمجة في أوقات فراغه.

المزيد من Nitin Ranganath

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك