جافاسكربتالمصفوفات
- مفهوم المصفوفات في جافاسكربت
- تعريف مصفوفة في جافاسكربت
- الوصول لعناصر المصفوفة في جافاسكربت
- تغيير قيم عناصر المصفوفة في جافاسكربت
- دوال المصفوفات في جافاسكربت
مفهوم المصفوفات في جافاسكربت
المصفوفة ( Array ) عبارة عن سلسلة من العناصر، كل عنصر فيها يملك قيمة و رقم ترتيب خاص به يعطى له بشكل تلقائي.
في جافاسكربت المصفوفة عبارة عن كائن و بالتالي فهي تندرج تحت النوع object
.
في هذا الدرس ستتعرف على جميع الطرق التي يمكنك من خلالها تعريف مصفوفات، بالإضافة إلى الدوال الجاهزة التي يمكنك استخدامها للتعامل معها.
تعريف مصفوفة في جافاسكربت
في جافاسكربت يمكنك تعريف المصفوفة بواسطة الرمز []
أو بواسطة الكونستركتور Array()
كما يلي.
// [] الشكل العام لتعريف مصفوفة بواسطة الرمز let arrayName = [element0, element1, ..., elementN]; // Array() الشكل العام لتعريف مصفوفة بواسطة الكونستركتور let arrayName = new Array(element0, element1, ..., elementN);
يفضّل تعريف المصفوفة بواسطة الرمز []
فهو أسرع في التنفيذ و يجعل الكود أسهل في القراءة.
في المثال التالي قمنا بتعريف مصفوفة باستخدام الرمز []
.
في المثال التالي قمنا بتعريف مصفوفة باستخدام الكونستركتور new Array()
.
في المثال التالي قمنا بتعريف مصفوفة على عدة أسطر.
في المثال التالي قمنا بتعريف مصفوفة فارغة و من ثم قمنا بإضافة العناصر فيها.
المثال الرابع
let countries = []; countries[0] = 'Algeria'; countries[1] = 'Egypt'; countries[2] = 'Lebanon';
في المثال التالي قمنا بتعريف مصفوفة تحتوي على قيم من مختلف الأنواع.
الوصول لعناصر المصفوفة في جافاسكربت
عناصر المصفوفة يتم تخزينها فيها بذات الترتيب الذي يتم وضعها فيه حيث أن كل عنصر فيها يتم إعطاؤه رقم فهرس ( Index ) بشكل تلقائي يحدد موقعه فيها. و رقم فهرس العنصر الأول في المصفوفة هو 0
.
الآن لنفترض أننا قمنا بتعريف مصفوفة إسمها a
و تتألف من 5 عناصر كما يلي.
let a = [10, 20, 30, 40, 50];
يمكنك أن تتصور أن العناصر مرتبة في المصفوفة a
في الذاكرة كما يلي.
بما أن المصفوفة تتألف من 5 عناصر، نلاحظ أنه تم فهرسة العناصر بالترتيب من 0 إلى 4.
في المثال التالي قمنا بتعريف مصفوفة تتألف من 5 عناصر و من ثم قمنا بطباعة قيمة كل عنصر فيها على سطر منفرد.
مثال
let arr = [10, 20, 30, 40, 50]; document.write(arr[0] + '<br>'); document.write(arr[1] + '<br>'); document.write(arr[2] + '<br>'); document.write(arr[3] + '<br>'); document.write(arr[4] + '<br>');
الخاصية length
بواسطة هذه الخاصية يمكنك معرفة عدد عناصر المصفوفة.
في المثال التالي قمنا بتعريف مصفوفة، بعدها قمنا بطباعة عدد العناصر الموجودة فيها.
الوصول لآخر عنصر في المنصفوفة
رقم فهرس آخر عنصر في المصفوفة يساوي عدد عناصرها ناقص واحد، أي length - 1
.
في المثال التالي قمنا بتعريف مصفوفة، بعدها قمنا بطباعة قيمة آخر عنصر فيها و عدد العناصر الموجودة فيها.
مثال
let arr = [10, 20, 30, 40, 50]; document.write('Last element value = ' + arr[arr.length-1]);
المرور على عناصر المصفوفة بوسطة الحلقة for
في المثال التالي قمنا بإنشاء حلقة for
تمرّ على جميع عناصر المصفوفة و تعرض قيمها.
مثال
let arr = [10, 20, 30, 40, 50]; for (let i = 0; i<arr.length; i++) { document.write(arr[i] + '<br>'); }
المرور على عناصر المصفوفة بوسطة الحلقة for in
في المثال التالي قمنا بإنشاء حلقة for in
تمرّ على جميع عناصر المصفوفة و تعرض قيمها.
مثال
let arr = [10, 20, 30, 40, 50]; for (let i in arr) { document.write(arr[i] + '<br>'); }
الحلقة for in
لا تضمن أن يتم إرجاع أرقام العناصر بذات الترتيب الذي تم وضعهم فيه و لذلك لا تستخدمها إذا كان ترتيب العناصر مهماً بل استخدم حلقة for
عادية.
المرور على عناصر المصفوفة بوسطة الحلقة for of
في المثال التالي قمنا بإنشاء حلقة for of
تمرّ على جميع عناصر المصفوفة و تعرض قيمها.
مثال
let arr = [10, 20, 30, 40, 50]; for (let element of arr) { document.write(element + '<br>'); }
الحلقة for in
تعطينا رقم عنصر جديد في كل دورة، في حين أن الحلقة for of
تعطينا قيمة عنصر جديد في كل دورة.
تغيير قيم عناصر المصفوفة في جافاسكربت
تغيير قيمة العنصر تتم أولاً من خلال الوصول إليه بواسطة رقم الفهرس الخاص به و من ثم إسناد القيمة له بواسطة الرمز =
.
في المثال التالي قمنا بتغيير قيم العنصر الأول، الثاني و الأخير في المصفوفة، ثم قمنا بعرض قيم جميع العناصر.
مثال
let arr = [10, 20, 30, 40, 50]; // هنا قمنا بتغيير قيمة العنصر الأول arr[0] = 1; // هنا قمنا بتغيير قيمة العنصر الثاني arr[1] = 2; // هنا قمنا بتغيير قيمة العنصر الأخير arr[arr.length - 1] = arr.length; // arr[4] = 5 document.write(arr);
في حال كانت المصفوفة مخزّنة في متغيّر نوعه const
فإنه يمكن تغيير قيمها بشكل طبيعي و لكن لا يمكن إعادة تعريف مصفوفة أخرى بذات الإسم في ذات البلوك.
في المثال التالي قمنا بتعريف المصفوفة كمصفوفة ثابتة، ثم حاولنا تعريفها من جديد، ثم حاولنا عرض قيمها.
مثال
// هنا قمنا بتعريف مصفوفة ثابتة const arr = [10, 20, 30, 40, 50]; // هنا حاولنا إعادة تعريف مصفوفة ثابتة و هذا الأمر سيسبب مشكلة const arr = [10, 20, 30, 40, 50]; // هذا الأمر لن يتنفذ بسبب المشكلة التي ستحصل عند تنفيذ الأمر السابق document.write(arr);
عند تجربة الكود في المتصفح فإن الكود السابق لن يظهر أي نتيجة عند تشغيله و لكنه يظهر الخطأ التالي في الكونسول.
دوال المصفوفات في جافاسكربت
فيما يلي جميع الدوال المتوفرة التي يمكنك استخدامها للتعامل مع المصفوفات.
إسم الدالة مع تعريفها | |
---|---|
1 | toString()
ترجع جميع قيم المصفوفة التي قامت باستدعائها كنص واحد مع وضع فاصلة بشكل تلقائي بين كل قيمتين.مثال عنها |
2 | toLocaleString(locales, options)
ترجع جميع قيم المصفوفة التي قامت باستدعائها كنص واحد و بلغة و شكل محدد كما أنها تضع فاصلة بشكل تلقائي بين كل قيمتين.locales هو باراميتر إختياري، مكانه يمكن تمرير نص يمثل اللغة التي سيتم تحويل قيم المصفوفة إليها (مثل العربية، الف.options هو باراميتر إختياري، مكانه يمكن تمرير كائن يحدد ما الذي سيمثله هذا النص (مثل عملة، وزن، وحدة قياس إلخ..).مثال عنها |
3 | join(separator)
ترجع جميع قيم المصفوفة كنص واحد مع إمكانية تحديد الرمز الفاصل بين كل قميتين.separator هو باراميتر إختياري مكانه يمكنك التمرير النص (أي الرمز) الذي سيتم استخدامه كفاصل بين القيم.في حال لم يتم تمرير قيمة مكان الباراميتر separator فإنه سيتم إعتماد الفاصلة , العادية للفصل بين القيم.مثال عنها |
4 | at(index)
نمرر لها رقم العنصر في المصفوفة التي قامت باستدعائها فترجع قيمة العنصر.مكان الباراميتر index نمرر لها رقم العنصر.في حال تم تمرير رقم أصغر من صفر لها فإنها ستبدأ بشكل عكسي، فمثلاً -1 تعني آخر عنصر.مثال عنها مثال آخر |
5 | concat(arr1, arr2, /* …, */ arrN)
ترجع نسخة من المصفوفة التي قامت باستدعائها مضافاً في آخرها أي مصفوفة يتم تمريرها في الدالة.مثال عنها |
6 | indexOf(searchElement, indexStart)
تبحث في المصفوفة التي قامت بإستدعائها عن رقم فهرس أول عنصر يوجد فيه نفس القيمة التي نمررها لها مكان الباراميتر searchElement و ترجعه.indexStart هو باراميتر إختياري يمكننا من خلاله تحديد رقم الفهرس الذي نريد بدء البحث من عنده.مثال عنها |
7 | lastIndexOf(searchElement, indexEnd)
تبحث في المصفوفة التي قامت بإستدعائها عن رقم فهرس آخر عنصر يوجد فيه نفس القيمة التي نمررها لها مكان الباراميتر searchElement و ترجعه.indexStart هو باراميتر إختياري يمكننا من خلاله تحديد رقم الفهرس الذي نريد بدء البحث من عنده.مثال عنها |
8 | fill(value, start, end)
تستخدم لإرجاع نسخة من المصفوفة التي قامت باستدعائها مع تحديث بعض قيمها.مكان الباراميتر value نمرر القيمة التي نريد وضعها في العناصر.start هو باراميتر إختياري يمكننا من خلاله تحديد رقم الفهرس الذي نريد بدء تحديث العناصر من عنده.end هو باراميتر إختياري يمكننا من خلاله تحديد رقم الفهرس الذي نريد إيقاف تحديث العناصر عنده.مثال عنها |
9 | includes(value)
تبحث في المصفوفة التي قامت باستدعائها عن القيمة التي نمررها لها مكان الباراميتر value .ترجع true في حال كانت المصفوفة تحتوي نفس قيمة، و ترجع false في حال لم تكن كذلك.مثال عنها |
10 | slice(start, end)
تستخدم للحصول على نسخة كاملة أو جزئية من المصفوفة التي قامت باستدعائها.start هو باراميتر إختياري يمكننا من خلالها تمرير رقم فهرس العنصر الذي نريد أن تبدأ النسخة من عنده.end هو بارميتر إختياري يمكننا من خلاله تمرير رقم فهرس العنصر الذي نريد أن تتوقف النسخة قبله.مثال عنها |
11 | shift()
ترجع قيمة أول عنصر في المصفوفة التي قامت باستدعائها و من ثم تحذفه منها.ترجع القيمة undefined في حال كانت المصفوفة فارغة.مثال عنها |
12 | pop()
ترجع قيمة آخر عنصر في المصفوفة التي قامت باستدعائها و من ثم تحذفه منها.ترجع القيمة undefined في حال كانت المصفوفة فارغة.مثال عنها |
13 | unshift(element1, element2, /* …, */ elementN)
تستخدم لإضافة عنصر أو مجموعة عناصر جديدة في بداية المصفوفة التي قامت باستدعائها.مثال عنها |
14 | push(element1, element2, /* …, */ elementN)
تستخدم لإضافة عنصر أو مجموعة عناصر جديدة في نهاية المصفوفة التي قامت باستدعائها.مثال عنها |
15 | Array.isArray(value)
تستخدم لمعرفة ما إن كان المتغير عبارة عن مصفوفة أم لا.ترجع true في حال كان المتغير عبارة عن مصفوفة، و ترجع false في حال لم يكن كذلك.مثال عنها |
16 | Array.of(element1, element2, /* …, */ elementN)
تستخدم لإنشاء مصفوفة من القيم التي يتم تمريرها لها عند استدعائها.مثال عنها |
17 | reverse()
تستخدم لترتيب قيم المصفوفة التي قامت باستدعائها بشكل عكسي. كما أنها تقوم بإرجاع عنوان المصفوفة الموجود في الذاكرة و الذي يمكنك تخزينه في متغير آخر لتصبح قادر على التعامل مع المصفوفة ذاتها بإسم آخر.مثال عنها |
18 | toReversed()
تستخدم للحصول على نسخة من المصفوفة التي قامت باستدعائها قيمها مرتبة بشكل عكسي.مثال عنها |
19 | sort()
تستخدم لترتيب قيم المصفوفة التي قامت باستدعائها بشكل تصاعدي. كما أنها تقوم بإرجاع عنوان المصفوفة الموجود في الذاكرة و الذي يمكنك تخزينه في متغير آخر لتصبح قادر على التعامل مع المصفوفة ذاتها بإسم آخر.مثال عنها |
20 | toSorted()
تستخدم للحصول على نسخة من المصفوفة التي قامت باستدعائها قيمها مرتبة بشكل تصاعدي.مثال عنها |
21 | splice(start, deleteCount, item1, item2, /* …, */ itemN)
تستخدم لحذف عناصر من المصفوفة التي قامت باستدعائها، كما أنها تسمح بإضافة عناصر مكان العناصر التي تم حذفها.مكان الباراميتر start نمرر رقم فهرس العنصر الذي سنبدأ الحذف من عنده.deleteCount هو باراميتر إختياري نمرر مكانه عدد العناصر التي نريد حذفها إبتداءاً من العنصر الذي تم تحديده. مع الإشارة إلى أنه في حال لم يتم تمرير قيمة لهذا العنصر فإنه سيتم حذف جميع العناصر الموجودة بعد ذلك العناصر. و إذا تم تمرير العدد صفر مكانه فهذا يعني أننا لا نريد حذف أي عنصر.item1, item2, itemN يقصد بها القيم التي يمكنك تمريرها ليتم إضافتها مكان القيم التي تم حذفها.مثال أول مثال ثاني مثال ثالث مثال رابع |
22 | toSpliced()
تستخدم للحصول على نسخة من المصفوفة التي قامت باستدعائها مع حذف عناصر منها، كما أنها تسمح بإضافة عناصر مكان العناصر التي تم حذفها.مثال عنها |
23 | values()
ترجع نسخة من قيم المصفوفة التي قامت باستدعائها على شكل Iterator و الذي يمكن من خلاله المرور عليها واحدة تلو الأخرى و مرة واحدة فقط.المثال الأول المثال الثاني |
24 | keys()
ترجع نسخة من أرقام فهرس المصفوفة التي قامت باستدعائها على شكل Iterator و الذي يمكن من خلاله المرور عليها واحدة تلو الأخرى و مرة واحدة فقط.المثال الأول المثال الثاني |
25 | entries()
ترجع نسخة من عناصر المصفوفة التي قامت باستدعائها على شكل Iterator و الذي يمكن من خلاله المرور عليها واحدة تلو الأخرى و مرة واحدة فقط.كل عنصر تحتويه هذه النسخة يتضمن رقم فهرس العنصر و قيمته. المثال الأول المثال الثاني |
26 | reduce(callbackFn, initialValue)
تمر على جميع عناصر المصفوفة التي قامت باستدعائها بأسلوب الإستدعاء الذاتي و تقوم في كل مرة بإجراء عملية حسابية معينة و في النهاية ترجع قيمة واحدة تمثل ناتج كل العمليات التي تم إجراءها.مكان الباراميتر callbackFn نمرر دالة تحدد ما سيتم إرجاعه من القيمة الحالية و القيمة التالية في كل عملية استدعاء ذاتي.initialValue هو باراميتر إختياري مكانه يمكن تمرير قيمة أولية ليتم البدء بها أولاً.في حال استدعائها على مصفوفة فارغة و لم يتم تمرير قيمة أولية لها فإنها ستسبب الخطأ Uncaught TypeError: reduce of empty array with no initial value مثال عنها |
27 | reduceRight(callbackFn, initialValue)
تمر على جميع عناصر المصفوفة التي قامت باستدعائها من النهاية إلى البداية بأسلوب الإستدعاء الذاتي و تقوم في كل مرة بإجراء عملية حسابية معينة و في النهاية ترجع قيمة واحدة تمثل ناتج كل العمليات التي تم إجراءها.مكان الباراميتر callbackFn نمرر دالة تحدد ما سيتم إرجاعه من القيمة الحالية و القيمة التالية في كل عملية استدعاء ذاتي.initialValue هو باراميتر إختياري مكانه يمكن تمرير قيمة أولية ليتم البدء بها أولاً.في حال استدعائها على مصفوفة فارغة و لم يتم تمرير قيمة أولية لها فإنها ستسبب الخطأ Uncaught TypeError: reduce of empty array with no initial value مثال عنها |
28 | some(callbackFn, thisArg)
تمر على جميع عناصر المصفوفة التي قامت باستدعائها بأسلوب الإستدعاء الذاتي للتأكد ما إن كان هناك عنصر واحد على الأقل تستوفي قيمته شرط معين.مكان الباراميتر callbackFn نمرر دالة تحدد ما هو الشرط الذي على أساسه يتم معرفة ما إن تحقق الشرط أم أنه يجب الإستمرار في الاستدعاء الذاتي لاختبار القيم التالية.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم الوصول إليه لم يستوفي الشرط.المثال الأول المثال الثاني |
29 | every(callbackFn, thisArg)
تمر على جميع عناصر المصفوفة التي قامت باستدعائها بأسلوب الإستدعاء الذاتي للتأكد ما إن كانت جميع قيمها تستوفي شرط معين.مكان الباراميتر callbackFn نمرر دالة تحدد ما هو الشرط الذي على أساسه يتم معرفة ما إن لم يتحقق الشرط أم أنه يجب الإستمرار في الاستدعاء الذاتي لاختبار القيم التالية.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم الوصول إليه و قد استوفى الشرط.المثال الأول المثال الثاني |
30 | find(callbackFn, thisArg)
تبحث في المصفوفة التي قامت باستدعائها عن أول قيمة تستوفي شرط معين و ترجعها.في حال لم تجد عنصر يملك قيمة تستوفي الشرط فإنها ترجع القيمة undefined .عملية البحث في هذه الدالة تتم بأسلوب الإستدعاء الذاتي لذلك فإننا مكان الباراميتر callbackFn نمرر دالة تحدد ما هو الشرط الذي على أساسه يتم معرفة ما إن تحقق الشرط أم أنه يجب الإستمرار في الاستدعاء الذاتي لاختبار القيم التالية.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم الوصول إليه و قد استوفى الشرط.المثال الأول المثال الثاني |
31 | findLast(callbackFn, thisArg)
تبحث في المصفوفة التي قامت باستدعائها عن آخر قيمة تستوفي شرط معين و ترجعها.في حال لم تجد عنصر يملك قيمة تستوفي الشرط فإنها ترجع القيمة undefined .عملية البحث في هذه الدالة تتم بأسلوب الإستدعاء الذاتي لذلك فإننا مكان الباراميتر callbackFn نمرر دالة تحدد ما هو الشرط الذي على أساسه يتم معرفة ما إن تحقق الشرط أم أنه يجب الإستمرار في الاستدعاء الذاتي لاختبار القيم التالية.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم الوصول إليه و قد استوفى الشرط.المثال الأول المثال الثاني |
32 | findIndex(callbackFn, thisArg)
تبحث في المصفوفة التي قامت باستدعائها عن أول قيمة تستوفي شرط معين و ترجع رقم فهرس العنصر الموجودة فيه.في حال لم تجد عنصر يملك قيمة تستوفي الشرط فإنها ترجع القيمة -1 .عملية البحث في هذه الدالة تتم بأسلوب الإستدعاء الذاتي لذلك فإننا مكان الباراميتر callbackFn نمرر دالة تحدد ما هو الشرط الذي على أساسه يتم معرفة ما إن تحقق الشرط أم أنه يجب الإستمرار في الاستدعاء الذاتي لاختبار القيم التالية.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم الوصول إليه و قد استوفى الشرط.مثال عنها |
33 | with(index, value)
ترجع نسخة من المصفوفة التي قامت باستدعائها مع تحديث قيمة أحد عناصرها.مكان الباراميتر index نمرر رقم فهرس العنصر الذي سيتم تحديث قيمته.مكان الباراميتر value نمرر القيمة التي سيتم وضعها في العنصر.مثال عنها |
34 | copyWithin(target, start, end)
ترجع نسخة من المصفوفة التي قامت باستدعائها مع تبديل جزء منها بجزء آخر موجود فيها أيضاً.مكان الباراميتر target نمرر رقم فهرس العنصر الذي سيتم وضع الجزئية المكررة إبتداءاً من عنده.مكان الباراميتر start نمرر رقم فهرس أول عنصر ستبدأ عملية التكرار من عنده.end هو باراميتر إختياري نمرر مكانه رقم فهرس آخر عنصر ستتوقف عملية التكرار قبله.مثال عنها |
35 | forEach(callbackFn, thisArg)
تستخدم للمرور على جميع عناصر المصفوفة التي قامت باستدعائها و التعامل معها بدون الحاجة لإنشاء حلقة لأجل ذلك.مكان الباراميتر callbackFn نمرر دالة تحتوي على الأوامر التي سيتم تنفيذها عند المرور على كل عنصر.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم المرور عليه.المثال الأول المثال الثاني |
36 | map(callbackFn, thisArg)
ترجع نسخة من المصفوفة التي قامت باستدعائها مع تعديل قيمها.مكان الباراميتر callbackFn نمرر دالة تحتوي على الأوامر التي سيتم تنفيذها عند المرور على كل عنصر.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم المرور عليه.المثال الأول المثال الثاني |
37 | filter(callbackFn, thisArg)
ترجع نسخة مفلترة من المصفوفة التي قامت باستدعائها و نقصد بذلك أنها تضع فقط القيم التي نحتاجها منها.مكان الباراميتر callbackFn نمرر دالة يتم تطبيقها على كل عنصر يتم المرور عليه و هي ترجع true إذا كان سيتم إضافة العنصر.thisArg هو باراميتر إختياري مكانه يتم وضع رقم فهرس آخر عنصر تم المرور عليه.مثال عنها |
38 | flat(depth)
ترجع نسخة من المصفوفة التي قامت باستدعائها مع دمج أبعادها ( Dimensions ).مثلاً إذا كانت المصفوفة ثنائية الأبعاد، فإنه يمكن استخدام هذه الدالة للحصول على نسخة أحادية الأبعاد منها. thisArg هو باراميتر إختياري مكانه يتم وضع عدد الأبعاد الأقصى التي يمكن التعمق بها لتحويلها لبعد واحد، قيمته الإفتراضية هي 1 لذلك فإنه في حال عدم تغييرها فإنه يجب تحويل أول بعد إضافي في المصفوفة لبعد واحد، مما يعني أنه في حال كانت المصفوفة ثلاثية الأبعاد فإنها ستصبح ثنائية الأبعاد و إذا كانت المصفوفة ثنائية الأبعاد فإنها ستصبح أحادية البُعد و هكذا.معلومة: النسخة التي ترجعها من المصفوفة الأساسية ترجعها خالية من أي عناصر فارغة. المثال الأول المثال الثاني المثال الثالث |