انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 22
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
11
الأمثلة
35
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,473
محتوى الدرس
في هذا الدرس 11تصفّح المواضيع

copyWithin() method دالة ()copyWithin

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

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

HTML 
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

HTML 
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

HTML 
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؟

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

HTML 
/* 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؟

HTML 
array.fill(value, start, end)

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

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

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

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

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses + "</b><br>");
document.write("<b>" + courses.fill('PHP') + "</b>");
جرّب بنفسك

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

HTML 
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>");
جرّب بنفسك

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

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

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

HTML 
array.includes(value_To_Find, from_Index);

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

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

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

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

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.includes('PHP') + "</b>");
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.includes('JavaScript') + "</b>");
جرّب بنفسك

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

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

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

HTML 
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 بلغة جافا سكريبت رقم او ترتيب القيمة بداخل المصفوفة.

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.indexOf('HTML') + "</b>");
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.indexOf('JavaScript') + "</b>");
جرّب بنفسك

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

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

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

HTML 
Array.isArray(value);

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

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

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

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

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

HTML 
let username = "Mohamed";
document.write("<b>" + Array.isArray(username) + "</b>");
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + Array.isArray(courses) + "</b>");
جرّب بنفسك

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

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

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

HTML 
array.join(separator);

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

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

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

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

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.join("]|[") + "</b>");
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.join("-") + "</b>");
جرّب بنفسك

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

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

كيف تعمل length method Syntax؟

HTML 
array.length

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

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

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

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL'];
document.write("<b>" + courses.length  + "</b>");
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.length  + "</b>");
جرّب بنفسك

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

HTML 
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؟

HTML 
array.lastIndexOf(search_Element, from_Index);

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

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

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

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

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL','JavaScript'];
document.write("<b>" + courses.lastIndexOf('JavaScript') + "</b>");
/* Return index number 2*/
جرّب بنفسك

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

HTML 
let username = "Ahmed";
document.write("<b>" + username.lastIndexOf('e') + "</b>");
/* Return letter number e = 3*/
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.lastIndexOf('MYSQL',3) + "</b>");
/* Return index number 2*/
جرّب بنفسك

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

HTML 
let courses = ['HTML', 'CSS', 'JavaScript', 'MYSQL','PHP','MYSQL'];
document.write("<b>" + courses.lastIndexOf('MYSQL',1) + "</b>");
/* Return index number 2*/
جرّب بنفسك

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

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

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

HTML 
array.pop()

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

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

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

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

HTML 
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>");
جرّب بنفسك

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

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

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

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

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

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

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

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

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

HTML 
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>");
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…