JavaScript

Java Script Array Methods
دوال المصفوفات في لغة الجافا سكريبت

ستتعلم في هذا الدرس بعض الدوال الغير التي تستخدم مع المصفوفات Java Script Array Methods هذه الدوال تساعدك علي التعديل او ارجاع بيانات هامه من المصفوفات او الاضافة علي المصفوفات بلغة جافا سكريبت.

التاريخ

01 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

3665

المواضيع

24
الشروحات chevron_left Java Script Array Methods chevron_left JavaScript

Java Script Array Methods
دوال المصفوفة في لغة الجافا سكريبت

</> copyWithin() method
دالة ()copyWithin

تقوم دالة ()copyWithin بنسخ جزء من عناصر المصفوفة الي موقع اخر وإعادته دون تعديل طوله length.

قمنا بنسخ العنصر رقم 3 index الي العنصر رقم index 0 استبدلنا حرف a بحرف d

let letters = ['a', 'b', 'c', 'd', 'e'];
document.write("<b>" + letters.copyWithin(0, 3, 4) + "</b>");
/*
old Elements =  ['a', 'b', 'c', 'd', 'e']
copy to index 0 the element at index 3 
*/

قمنا بنسخ العنصر رقم 2 index الي العنصر رقم index 1 استبدلنا حرف CSS ب JavaScript

let courses = ['HTML', 'CSS', 'JavaScript', 'PHP', 'MYSQL'];
document.write("<b>" + courses.copyWithin(1, 2, 3) + "</b>");
/*
old Elements =   ['HTML', 'CSS', 'JavaScript', 'PHP', 'MYSQL']
copy to index 1 the element at index 2 
*/

قمنا بنسخ العنصر رقم 1 index الي العنصر رقم index 0 استبدلنا HTML ب css وبدأ صف العناصر علي حسب array length

let courses = ['HTML', 'CSS', 'JavaScript', 'PHP', 'MYSQL'];
document.write("<b>" + courses.copyWithin(0, 1) + "</b>");
/*
old Elements =   ['HTML', 'CSS', 'JavaScript', 'PHP', 'MYSQL']
copy to index 0 the element at index 1
*/

كيف تعمل دالة copyWithin() method Syntax؟

copyWithin(target);
copyWithin(target, start);
copyWithin(target, start, end);

معطيات او عوامل (متغيرات)   Parameters  دالة ()copyWithin :

تأخذ دالة ()copyWithin ثلاث عوامل او ثلاث قيم وهم :

  •   Target  رقم العنصر index number الذي سوف يتغير لقيمه اخري من قيم المصفوفة.
  •   Start  اختياري (optional) رقم العنصر index number الذي سوف نبدأ نسخ منه.
  •   end  اختياري (optional)  رقم العنصر index number الذي سوف ينتهي عنده النسخ.

ملاحظات هامة :

  • لو قمت بأدخال اي عامل من الثلاث عوامل (Target,Start,End) ارقام سالبة سوف يتم العد عكسي من اخر المصفوفة.
  • لو قمت بأدخال target value رقم بعد start value سوف يتم النسخ تسلسلي حتي array length.
  • دالة ()copyWithin تقوم بالتعديل علي المصفوفة الاصلية ويتم تبديل القيم بالقيم الجديدة.
  • دالة ()copyWithin لا تغير عدد القيم length الموجوده بداخل المصفوفة.

تقوم دالة ()copyWithin بنسخ جزء من عناصر المصفوفة الي موقع اخر وإعادته دون تعديل طوله.

</> ()JavaScript Array method concat
دالة ()concat دوال المصفوفات في لغة جافا سكريبت

تستخدم دالة ( )concat في دمج مصفوفتين أو أكثر او دمج قيم وتقوم بأنشاء مصفوفة جديدة تحتوي علي قيم المصفوفات التي دمجناهم معاً او القيم الجديدة.

لا تغير الدالة ( )concat المصفوفات الموجودة ، ولكنها تقوم بأنشاء مصفوفة جديدة تحتوي على قيم المصفوفات المدمجة.

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


دمج مصفوفتين عن طريق دالة concat وذلك في مصفوفة جديدة

let backEnd= ["PHP", "LARAVEL"];
let FrontEnd = ["HTML", "CSS", "JAVASCRIPT"];
let fullStack = backEnd.concat(FrontEnd);
معطيات او عوامل (متغيرات)    Parameters  دالة ()concat :

  • تأخذ دالة ()concat اي عدد من العوامل.
  • يمكنك دمج قيم values او مصفوفات اخري arrays مع المصفوفة الاصلية organic Array.
  • لا يوجد لها حد ادني او اقصي في عدد العوامل  Parameters .

تصف العوامل بداخل دالة concat ويسبقها المصفوفة الرئيسية او الاصلية.

organicArray.concat(value1, value2, ..., valueN);

دمج مصفوفتين عن طريق دالة concat وذلك في مصفوفة جديدة

/* Organic Array*/
let backEnd= ["PHP", "LARAVEL"];
/* second Array*/
let frontEnd = ["HTML", "CSS", "JAVASCRIPT"];
/* third Array*/
let base = ["Algorithm", "DS"];
/* new Array store all values */
let fullStack = backEnd.concat(frontEnd ,base); 
document.write(fullStack);

ارجاع القيم عن طريقة دالة concat() في لغة جافا سكريبت concat()  Return Value.

  • يتم ارجاع القيم التي دمجها مع المصفوفة الاصلية organic array في مصفوفة جديدة نقوم بتحديد متغير لها.
  • دالة concat() تقوم بأنشاء مصفوفة جديدة مع الاحتفاظ بالمصفوفة القديمة تضاف للمتغير نقوم بتحديدة.

</> fill() Method arrays in JavaScript
دالة ()fill في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()fill مع المصفوفات في لغة جافا سكريبت لتقوم باستبدال جميع قيم المصفوفة بقيمة ثابتة.

كيف تعمل دالة copyWithin() method Syntax؟

array.fill(value, start, end)

معطيات او عوامل دالة ()fill مع المصفوفات fill Parameters :

معطيات او عوامل (متغيرات)   Parameters  دالة ()fill:

تأخذ دالة ()fill ثلاث عوامل او ثلاث قيم وهم :

  •   Value  القيمة الجديدة التي سوف نقوم باستبدال قيم المصفوفة بها.
  •   Start  اختياري (optional) رقم العنصر index number الذي سوف تبدأ منه.
  •   end  اختياري (optional)  رقم العنصر index number الذي سوف تنتهي به.

قمنا باستبدال كل قيم المصفوفة بقيمة جديدة وهي PHP

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses + "</b><br>");
document.write("<b>" + courses.fill('PHP') + "</b>");

قمنا باستبدال أول قيميتين من المصفوفة بدء من القيمة الاولي حتي القيمة الثانية بقيمة جديدة وهي PHP.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
/* Before Change*/
document.write("<b>" + courses + "</b><br>");
document.write("<b>" + courses.fill('PHP',0,2) + "</b><br>");
/* After Change*/
document.write("<b>" + courses + "</b><br>");

ملاحظات هامة :

  • دالة ()fill تقوم بارجاع مصفوفة جديدة معدلة بالقيم التي استبدلت من العوامل start و end.
  • لو قمت بأدخال end  أو start بأرقام سالبة سوف يتم العد من عكس المصفوفة بدأ ن اخر قيمة.
  • الة ()fill تقوم بتغيير نفس المصفوفة وليس عمل نسخ للمفوفة اي القيم القديمة تم استداله بقيم جديدة في نفس المصفوفة.

</> includes() Method arrays in JavaScript
دالة ()includes في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()includes مع المصفوفات في لغة جافا سكريبت لتقوم بفحص قيمة ما داخل قيم المصفوفة.

كيف تعمل دالة includes() method Syntax؟

array.includes(value_To_Find, from_Index);

معطيات او عوامل دالة ()fill مع المصفوفات includes Parameters :

معطيات او عوامل (متغيرات)   includes  دالة ()includes:

تأخذ دالة ()includes عاملين وهم :

  •    Value to find  القيمة التي سوف نقوم فحصها check داخل قيم المصفوفة.
  •   From index  اختياري (optional) رقم العنصر index number الذي سوف تبدأ الفحص او البحث منه.

قمنا بالبحث عن هذة القيمة داخل جميع قيم المصفوفة وهي PHP وهي غير متاحة وسوف يتم ارجاع false يعني ذلك انها غير موجوده.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.includes('PHP') + "</b>");

قمنا بالبحث عن هذة القيمة داخل جميع قيم المصفوفة وهي JavaScript وهي متاحة وسوف يتم ارجاع true يعني ذلك انها موجوده.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.includes('JavaScript') + "</b>");

ملاحظات هامة :

  • دالة ()includes تقوم بارجاع  true  في حال ان القيمة موجوده بداخل قيم المصفوفة.
  • دالة ()includes تقوم بارجاع   false في حال ان القيمة غير موجوده بداخل قيم المصفوفة.

</> indexOf() Method arrays in JavaScript
دالة ()indexOf في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()indexOf مع المصفوفات في لغة جافا سكريبت لتقوم بأرجاع رقم index لأي عنصر في المصفوفة العنصر الأول قيمته صفر 0.

كيف تعمل دالة indexOf() method Syntax؟

array.indexOf(searchElement, fromIndex);

معطيات او عوامل دالة ()indexOf مع المصفوفات includes Parameters :

معطيات او عوامل (متغيرات)   indexOf  دالة ()indexOf:

تأخذ دالة ()indexOf عاملين وهم :

  •     Element to find index  القيمة التي سوف نقوم بالاستعلام عن رقمها index number داخل المصفوفة.
  •   Start search from  اختياري (optional) رقم العنصر index number الذي سوف يبدأ البحث منه القيمة الافتراضية هي 0.

قمنا باضافة قيمة HTML لكي نستعلم عن index number بلغة جافا سكريبت رقم او ترتيب القيمة بداخل المصفوفة.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.indexOf('HTML') + "</b>");

قمنا بالبحث عن هذة القيمة داخل جميع قيم المصفوفة وهي JavaScript وهي متاحة وسوف يتم ارجاع true يعني ذلك انها موجوده.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.indexOf('JavaScript') + "</b>");

ملاحظات هامة :

  • دالة ()indexOf تقوم بارجاع  index number  في حال ان القيمة موجوده مره واحده علي الاقل بداخل قيم المصفوفة.
  • دالة ()indexOf تقوم بارجاع   -1 في حال ان القيمة غير موجوده بداخل قيم المصفوفة.

</> isArray() Method arrays in JavaScript
دالة ()isArray في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()isArray في لغة جافا سكريبت لتقوم بفحص عامل argument [متغير - variable] هل هو مصفوفة ام لا.

كيف تعمل دالة indexOf() method Syntax؟

Array.isArray(value);

معطيات او عوامل دالة ()isArray مع المصفوفات isArray Parameters :

معطيات او عوامل (متغيرات)   isArray  دالة ()isArray:

تأخذ دالة ()isArray عامل فقط :

  •  value  القيمة التي سوف نقوم بالاستعلام عنها اذا كانت مصفوفة ام لا.

قمنا بالاستعلام عن المتغير username سوف ترجع دالة isArray قيمة false اي انها ليست مصفوفة array.

let username = "Mohamed";
document.write("<b>" + Array.isArray(username) + "</b>");

قمنا بالبحث عن هذة القيمة داخل جميع قيم المصفوفة وهي JavaScript وهي متاحة وسوف يتم ارجاع true يعني ذلك انها موجوده.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + Array.isArray(courses) + "</b>");

ملاحظات هامة :

  • دالة ()isArray تقوم بارجاع  true في حال ان القيمة هي مصفوفة.
  • دالة ()isArray تقوم بارجاع   false في حال ان القيمة ليست مصفوفة.

</> join() Method arrays in JavaScript
دالة ()join في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()join في لغة جافا سكريبت لتقولم بارجاع نص string متسلسل concatenating مع علامة مثل الفواصل او العلامات التي سوف تفصل بين كل عنصر من عناصر المصفوفة عندما يتم ارجاعها كنص string.

كيف تعمل دالة join() method Syntax؟

array.join(separator);

معطيات او عوامل دالة ()join مع المصفوفات join Parameters :

معطيات او عوامل (متغيرات)   join  دالة ()join:

تأخذ دالة ()join عامل فقط :

  •  separator   اختياري (optional) الفواصل او العلامات التي سوف تفصل بين كل عنصر من عناصر المصفوفة عندما يتم ارجاعها كنص string يمكنك عدم تحديدها وسوف تكون مسافة فارغة.

قمنا بالاستعلام عن المتغير username سوف ترجع دالة isArray قيمة false اي انها ليست مصفوفة array.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.join("]|[") + "</b>");

قمنا بالبحث عن هذة القيمة داخل جميع قيم المصفوفة وهي JavaScript وهي متاحة وسوف يتم ارجاع true يعني ذلك انها موجوده.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.join("-") + "</b>");

ملاحظات هامة :

  • دالة ()join لن تغير في المصفوفة الاصلية organic Array.
  • دالة ()join تقوم بارجاع القيم الفارغة undefined or null بنص فارغ.

</> Array length Method in JavaScript
دالة length مع المصفوفات في لغة جافا سكريبت

تستخدم دالة length في لغة جافا سكريبت لتقوم بارجاع نص رقم وهو اجمالي عدد عناصر المصفوفة.

كيف تعمل length method Syntax؟

array.length

معطيات او عوامل دالة ()join مع المصفوفات join Parameters :

معطيات او عوامل (متغيرات)   length  دالة length:

  • لا تأخذ دالة length اي عوامل فقط اسم المصفوفة يتبعها  length.

قمنا بالاستعلام عن عدد عناصر المصفوفة وهو 4 عناصر.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.length  + "</b>");

قمنا بالاستعلام عن عدد عناصر المصفوفة وهو 6 عناصر.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.length  + "</b>");

ملاحظات هامة :

  • يمكنك تغيير حجم length عدد عناصر المصفوفة عم طريق تعيين Assign  قيمة لها وهي ان نساوي بالرقم الذي نريده وستفقد المصفوفة حينها القيم المقطوعه اذا كان الرقم المحدد اقل من عدد المصفوفة.

قمنا بالاستعلام عن عدد عناصر المصفوفة وهو 6 عناصر.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
courses.length  = 3;
document.write("<b>" + courses   + "</b>");

</> lastIndexOf() Method arrays in JavaScript
دالة ()lastIndexOf في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()lastIndexOf في لغة جافا سكريبت لتقوم بجلب او ارجاع رقم اخر عنصر في المصفوفة مع الاخذ بالعلم ان المصفوفات تبدأ من الرقم صفر.

كيف تعمل دالة lastIndexOf() method Syntax؟

array.lastIndexOf(search_Element, from_Index);

معطيات او عوامل Parameters دالة ()lastIndexOf مع المصفوفات :

معطيات او عوامل (متغيرات)  دالة  lastIndexOf() :

تأخذ دالة ()lastIndexOf عاملين وهم :

  •  character  قيمة نوعها نص وهي اي قيمة من عناصر المصفوفة لكي تقوم هذة الدالة بارجاع رقم لك وهو رقم العنصر الاخير في المصفوفة.
  •  index number  مع  character   لكي تقوم الدالة بالبحث للخلف من index رقم عنصر معين واذا كان العنصر غير متاح سوف تقوم بارجاع   -1 .

قمنا بالاستعلام عن عنصر ال JavaScript بداخل المصفوفة وهو رقم 2 وايضاً هو رقم 6 من حيث بدء العد من صفر فسوف تقوم الداله بارجاع اخر عنصر وهو 6.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL','JavaScript'];
document.write("<b>" + courses.lastIndexOf('JavaScript') + "</b>");
/* Return index number 2*/

يممكنا استخدام دالة lastIndexOf مع النصوص string سوف نبحث عن رقم حرف e بداخل المصفوفة وهو 3.

let username = "Ahmed";
document.write("<b>" + username.lastIndexOf('e') + "</b>");
/* Return letter number e = 3*/

قمنا بالاستعلام عن عنصر MYSQL وهو متاح والقيمه غير متاحه وقامت بارجاع رقمه وهو 3.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.lastIndexOf('MYSQL',3) + "</b>");
/* Return index number 2*/

قمنا بالاستعلام عن عنصر MYSQL وهو متاح ولكن قمنا بتمرير قيمة index 1 الي الداله ليبدأ البحث الي الخلف والقيمه غير متاحه وقامت بارجاع -1 اي انها غير متاحه.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.lastIndexOf('MYSQL',1) + "</b>");
/* Return index number 2*/

ملاحظات هامة :

  • دالة ()lastIndexOf تقوم بارجاع الفهرس index لأي عنصر في المصفوفة اذا كان موجود مره واحده ع الاقل وهو اخر عنصر في حال ان كان موجود اكثر من مره.
  • دالة ()lastIndexOf تقوم بارجاع   -1 في حال ان القيمة ليست متاحة في المصفوفة.

</> pop() Method arrays in JavaScript
دالة ()pop في المصفوفات في لغة جافا سكريبت

تستخدم دالة ()pop في لغة جافا سكريبت لتقوم بحذف كل عناصر المصفوفة وتقوم بأرجاع اخر عنصر في المصفوفة بدون العناصر الاخري.

كيف تعمل دالة pop() method Syntax؟

array.pop()

معطيات او عوامل Parameters دالة ()pop مع المصفوفات :

معطيات او عوامل (متغيرات)  دالة  ()pop :

  •  لا تأخذ دالة ()pop اي عوامل  parameters .

قمنا بالاستعلام عن اخر عنصر في المصفوفة وهو MYSQL.

let courses = ['HTML', 'CSS', 'JavaScript', 'PHP','MYSQL',];
document.write("<b>" + courses+ "</b><br>");
document.write("<b>" + courses.pop() + "</b><br>");
document.write("<b>" + courses+ "</b>");

ملاحظات هامة :

  • دالة ()pop تقوم بارجاع اخر عنصر في الصفوفة فقط مع حذفة من المصفوفة الاصلية فاذا قمت بطباعة المصفوفة بعد هذة العملية ستلاحظ ان المصفوفة بدون اخر عنصر.
  • دالة ()pop تقوم بارجاع   undefined في حال ان المصفوفة فارغة.
  • دالة ()pop تغير في المصفوفة الاصلية وتحذف اخر عنصر وليس نسخ المصفوفة الي مصفوفة جديدة.

</> push() Method arrays in JavaScript
دالة ()push في المصفوفات في لغة جافا سكريبت

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

كيف تعمل دالة push() method Syntax؟

array.push(element_1, element_2, ..., element_X);

معطيات او عوامل Parameters دالة ()push مع المصفوفات :

معطيات او عوامل (متغيرات)  دالة  ()push :

تأخذ دالة ()push عامل واحد او اكثر وهم :

  •  Element or Elements  اي قيمة تضاف في نهاية المصفوفة او اكثر تضاف كعنصر للمصفوفة ونفصل بينهم بالفاصلة comma.

قمنا بالاستعلام عن عنصر ال JavaScript بداخل المصفوفة وهو رقم 2 وايضاً هو رقم 6 من حيث بدء العد من صفر فسوف تقوم الداله بارجاع اخر عنصر وهو 6.

let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses + "</b><br>");
document.write("<b>" + courses.push('PHP') + "</b><br>");
document.write("<b>" + courses + "</b><br>");

ملاحظات هامة :

  • دالة ()push تقوم بارجاع رقم الفهرس الخاص بالعنصر المضاف.
  • دالة ()push تقوم بالتعديل علي المصفوفة الاصلية وليس عمل نسخه اخري منها.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.