القوائم في JavaScript

تستخدم مجموعات JavaScript لتخزين عدة قيم في متغير واحد.

مثال

var cars = ["Saab", "Volvo", "BMW"];

جرب بنفسك

ما هو المجموعة؟

المجموعة هي متغير خاص يمكنه تخزين أكثر من قيمة واحدة في وقت واحد.

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

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

لكن ماذا إذا كنت ترغب في مرور جميع السيارات والبحث عن قيمة معينة؟ ماذا إذا لم تكن هناك ثلاثة علامات تجارية للسيارات بل ثلاثمئة علامة تجارية؟

الحل هو مجموعة!

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

إنشاء مجموعة

استخدام نص المجموعة هو أسهل طريقة لإنشاء مجموعة في JavaScript.

النص:

var array-name = [item1, item2, ...];

مثال

var cars = ["Saab", "Volvo", "BMW"];

جرب بنفسك

الفضاءات والخطوط المنقوطة ليست مهمة. يمكن أن تكون البيانات في سطر واحد:

مثال

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

جرب بنفسك

لا تدخل علامة الفصل في العنصر الأخير (مثل "BMW",).

قد يكون هناك مشاكل في التشغيل عبر المتصفحات.

استخدام كلمة المفتاح JavaScript new

الآن سنرى مثال آخر سيقوم بإنشاء مجموعة، وسيتم تعيين قيم لها:

مثال

var cars = new Array("Saab", "Volvo", "BMW");

جرب بنفسك

تأثير هذين المثالين هو متطابق تمامًا.لا تحتاج إلى استخدام new Array().

من أجل البساطة، والقراءة، والسرعة في التنفيذ، يرجى استخدام الطريقة الأولى (طريقة نص المجموعة).

للوصول إلى عنصر المجموعة

نحن نستخدمرقم المفتاح (رقم السجل)لإشارة إلى عنصر المجموعة.

هذا التعليمات يستدعي قيمة العنصر الأول في cars:

var name = cars[0];

هذا التعليمات يعدل العنصر الأول في cars:

cars[0] = "Opel";

مثال

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

جرب بنفسك

[0] هو العنصر الأول في المجموعة.[1] هو الثاني.بدء من 0 هو عدد الأنماط.

تغيير عنصر المجموعة

هذا التعليمات يعدل قيمة العنصر الأول في cars:

cars[0] = "Opel";

مثال

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

جرب بنفسك

زيارة القائمة بكاملها

باستخدام JavaScript، يمكنك الوصول إلى القائمة بكاملها من خلال اسم القائمة:

مثال

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

جرب بنفسك

القائمة هي كائن

القائمة هي نوع خاص من الكائنات. في JavaScript، يمكنك استخدام typeof العمليات تعود بـ "object".

لكن، أفضل طريقة لوصف قائمة JavaScript هي باستخدام قائمة.

استخدام القائمةالعددللوصول إلى "العنصر". في هذا المثال،person[0] ترجع Bill:

القائمة:

var person = ["Bill", "Gates", 62];

جرب بنفسك

استخدام الكائنالاسمللوصول إلى "العضو". في هذا المثال،person.firstName ترجع Bill:

الكائن:

var person = {firstName:"Bill", lastName:"Gates", age:19};

جرب بنفسك

عناصر القائمة يمكن أن تكون كائنات

يمكن أن تكون المتغيرات في JavaScript كائنات. القائمة هي نوع خاص من الكائنات.

لذلك، يمكنك وضع أنواع متعددة من المتغيرات في نفس القائمة.

يمكنك حفظ الأشياء في القائمة. يمكنك حفظ الدوال في القائمة. يمكنك حتى حفظ قائمة داخل قائمة:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

خصائص وطرق القائمة

القوة الحقيقية لقائمة JavaScript مخفية في خصائصها وطرقها:

مثال

var x = cars.length;   // تعود خصائص الطول بعدد العناصر
var y = cars.sort();   // تقوم دالة sort() بترتيب القائمة

سنتعلم في الفصل القادم طرق القائمة.

خصائص الطول

length الخصائص تعود بطول القائمة (عدد عناصر القائمة).

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // طول fruits هو 4

جرب بنفسك

length الخصائص دائمًا أكبر من أعلى معلمة القائمة (السجل).

زيارة العنصر الأول في القائمة

مثال

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

جرب بنفسك

زيارة العنصر الأخير في القائمة

مثال

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

جرب بنفسك

استكشاف عناصر القائمة

الطريقة الأكثر أمانًا لاستكشاف قائمة الأرقام هي استخدام "for"دائرة اللفة:"

مثال

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

جرب بنفسك

يمكنك أيضًا استخدام Array.foreach() الوظيفة:

مثال

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

جرب بنفسك

إضافة عنصر إلى المجموعة

أفضل طريقة لإضافة عنصر إلى المجموعة هي استخدام push() الطريقة:

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // إضافة عنصر جديد (Lemon) إلى fruits

جرب بنفسك

يمكن أيضًا استخدام length لإضافة عنصر جديد إلى المجموعة يمكن استخدام

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // إضافة عنصر جديد (Lemon) إلى fruits

جرب بنفسك

تحذير!

إضافة العنصر بتفاصيل أعلى من الرقم الأعلى في المجموعة يمكن أن يخلق "فراغًا غير معرف":

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // إضافة عنصر جديد (Lemon) إلى fruits

جرب بنفسك

المجموعات المرتبطة

العديد من العناصر البرمجية يدعم المجموعات بتسمية المرجعية.

المجموعات التي تحتوي على تسمية المرجعية تسمى مجموعات مرتبطة (أو مشتقة).

جافا سكربت ليس يدعمالمجموعات بتسمية المرجعية.

في جافا سكربت، يمكن استخدام المجموعات فقطالمؤشرات数字ية.

مثال

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length يعود 3
var y = person[0];              // person[0] يعود "Bill"

جرب بنفسك

تحذير!

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

بعد از آن، جميع طرق و خصائص المجموعات ستنتج نتائج غير صحيحة.

مثال:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length سيعود 0
var y = person[0];              // person[0] سيعود undefined

جرب بنفسك

الفرق بين القائمة والكائن

في جافا سكربت،القائمةاستخدامالمؤشرات数字ية.

في جافا سكربت،الكائناستخدامالمؤشرات المسماة.

القائمة هي نوع خاص من الكائنات، تحتوي على مؤشرات数字ية.

متى تستخدم القائمة، ومتى تستخدم الكائن؟

  • لا يدعم جافا سكربت القوائم المرتبطة
  • إذا كنت ترغب في تسمية العناصرالنص (النص)إذن يجب استخدامهالكائن.
  • إذا كنت ترغب في تسمية العناصرالعددإذن يجب استخدامهالقائمة.

تجنب new Array()

ليس من الضروري استخدام بناء القائمة المدمج في جافا سكربت new Array().

استخدم [] بدلاً من ذلك!

تأسيسًا لعدد من العبارات المختلفة، تُنشأ قائمة فارغة جديدة باسم points:

var points = new Array();         // سيء
var points = [];                  // جيد

تأسيسًا لعدد من العبارات المختلفة، تُنشأ قائمة تحتوي على ستة أرقام جديدة:

var points = new Array(40, 100, 1, 5, 25, 10); // سيء
var points = [40, 100, 1, 5, 25, 10];          // جيد

جرب بنفسك

new الكلمات المفتاحية تجعل الكود معقدًا. ستجلب أيضًا بعض النتائج غير المتوقعة:

var points = new Array(40, 100);  // إنشاء قائمة تحتوي على عنصرين (40 و 100)

ماذا سيحدث إذا قمت بإزالة عنصر واحد؟

var points = new Array(40);       // إنشاء قائمة تحتوي على 40 عنصر غير معرف!

جرب بنفسك

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

السؤال الشائع هو: كيف يمكنني معرفة ما إذا كان متغير ما هو قائمة؟

المشكلة تكمن في عموديات جافا سكربت typeof يعود "العدة":

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // يعود "العدة"

جرب بنفسك

وظيفة عمودية يعود "العدة"، لأن جافا سكربت قائمة هي كائن.

الحل 1:

لحل هذه المشكلة، قام ECMAScript 5 بتعريف طريقة جديدة Array.isArray():

Array.isArray(fruits);     // يعود إلى true

جرب بنفسك

مشكلة هذا الحل تكمن في ECMAScript 5 لا يدعم المتصفحات القديمة.

الحل 2:

أنشئ الخاص بك isArray() الوظيفة لتحل هذا المشكلة:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

جرب بنفسك

إذا كان المعامل مصدرًا للعدد، فإن الدالة أعلاه تعود دائمًا إلى true.

أو بتفسير أكثر دقة: إذا كان العنصر يحتوي على الكلمة "Array" في原型، فإنه يعود إلى true.

الحل 3:

إذا كان العنصر مكونًا من قبل المبنى المحدد، instanceof المعادلة تعود إلى true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // يعود إلى true

جرب بنفسك