مصفوفات جافا سكريبت
المصفوفة هي متغير خاص يمكن أن يحتوي على أكثر من قيمة:
const cars = ["Saab", "Volvo", "BMW"];
لماذا استخدام المصفوفة؟
إذا كانت لديك قائمة بالعناصر (قائمة بأسماء السيارات ، على سبيل المثال) ، فقد يبدو تخزين السيارات في متغيرات فردية كما يلي:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
ومع ذلك ، ماذا لو كنت تريد المرور عبر السيارات والعثور على واحدة محددة؟ وماذا لو لم يكن لديك 3 سيارات ، بل 300؟
الحل هو مصفوفة!
يمكن أن تحتوي المصفوفة على العديد من القيم تحت اسم واحد ، ويمكنك الوصول إلى القيم بالإشارة إلى رقم الفهرس.
إنشاء مصفوفة
يعد استخدام المصفوفة الحرفية أسهل طريقة لإنشاء مصفوفة JavaScript.
بناء الجملة:
const array_name = [item1, item2, ...];
إنها ممارسة شائعة للإعلان عن المصفوفات باستخدام الكلمة الأساسية const .
تعرف على المزيد حول const مع المصفوفات في الفصل: JS Array Const .
مثال
const cars = ["Saab", "Volvo", "BMW"];
المسافات وفواصل الأسطر ليست مهمة. يمكن أن يمتد الإعلان على عدة أسطر:
مثال
const cars = [
"Saab",
"Volvo",
"BMW"
];
يمكنك أيضًا إنشاء مصفوفة ، ثم توفير العناصر:
مثال
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
باستخدام JavaScript Keyword new
يقوم المثال التالي أيضًا بإنشاء مصفوفة ، وتعيين قيم لها:
مثال
const cars = new Array("Saab", "Volvo", "BMW");
المثالان أعلاه يفعلان نفس الشيء تمامًا.
ليست هناك حاجة لاستخدام new Array().
للبساطة وسهولة القراءة وسرعة التنفيذ ، استخدم طريقة المصفوفة الحرفية.
الوصول إلى عناصر المصفوفة
يمكنك الوصول إلى عنصر مصفوفة بالرجوع إلى رقم الفهرس :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
ملاحظة: تبدأ فهارس الصفيف بالرقم 0.
[0] هو العنصر الأول. [1] هو العنصر الثاني.
تغيير عنصر صفيف
يغير هذا البيان قيمة العنصر الأول في cars:
cars[0] = "Opel";
مثال
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
الوصول إلى الصفيف الكامل
باستخدام JavaScript ، يمكن الوصول إلى المصفوفة الكاملة بالرجوع إلى اسم المصفوفة:
مثال
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
المصفوفات هي كائنات
المصفوفات هي نوع خاص من الكائنات. العامل typeofفي JavaScript يسترجع "كائن" للمصفوفات.
لكن أفضل وصف لمصفوفات JavaScript هي المصفوفات.
المصفوفات تستخدم الأرقام للوصول إلى "عناصرها". في هذا المثال ، person[0]
يتم إرجاع John:
مجموعة مصفوفة:
const person = ["John", "Doe", 46];
تستخدم الكائنات أسماء للوصول إلى "أعضائها". في هذا المثال ،
person.firstName
يتم إرجاع John:
هدف:
const person = {firstName:"John", lastName:"Doe", age:46};
يمكن أن تكون عناصر المصفوفة كائنات
يمكن أن تكون متغيرات جافا سكريبت كائنات. المصفوفات هي أنواع خاصة من الكائنات.
لهذا السبب ، يمكن أن يكون لديك متغيرات من أنواع مختلفة في نفس المصفوفة.
يمكن أن يكون لديك كائنات في المصفوفة. يمكن أن يكون لديك وظائف في المصفوفة. يمكن أن يكون لديك مصفوفات في مصفوفة:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
خصائص وطرق المصفوفة
القوة الحقيقية لمصفوفات JavaScript هي خصائص وطرق المصفوفات المضمنة:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
يتم تناول طرق المصفوفة في الفصول التالية.
الطول الممتلكات
ترجع lengthخاصية المصفوفة طول المصفوفة (عدد عناصر المصفوفة).
مثال
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
الخاصية هي lengthدائمًا أكثر من أعلى فهرس مصفوفة.
الوصول إلى عنصر الصفيف الأول
مثال
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
الوصول إلى Last Array Element
مثال
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
تكرار عناصر المصفوفة
إحدى الطرق للتكرار خلال المصفوفة هي استخدام forحلقة:
مثال
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
يمكنك أيضًا استخدام Array.forEach()الوظيفة:
مثال
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
مضيفا عناصر الصفيف
أسهل طريقة لإضافة عنصر جديد إلى المصفوفة هي استخدام التابع push():
مثال
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
يمكن أيضًا إضافة عنصر جديد إلى مصفوفة باستخدام lengthالخاصية:
مثال
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
تحذير !
يمكن أن تؤدي إضافة عناصر ذات فهارس عالية إلى إنشاء "ثقوب" غير محددة في المصفوفة:
مثال
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
المصفوفات النقابية
تدعم العديد من لغات البرمجة المصفوفات ذات الفهارس المسماة.
تسمى المصفوفات ذات الفهارس المسماة المصفوفات الترابطية (أو التجزئة).
لا يدعم JavaScript المصفوفات ذات الفهارس المسماة.
في JavaScript ، تستخدم المصفوفات دائمًا فهارس مرقمة .
مثال
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
تحذير !!
إذا كنت تستخدم فهارس مسماة ، فإن JavaScript سيعيد تعريف المصفوفة إلى كائن.
بعد ذلك ، ستنتج بعض خصائص وصفات المصفوفات نتائج غير صحيحة .
مثال:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
الفرق بين المصفوفات والكائنات
في JavaScript ، تستخدم المصفوفات فهارس مرقمة .
في JavaScript ، تستخدم الكائنات فهارس مسماة .
المصفوفات هي نوع خاص من الكائنات ، مع فهارس مرقمة.
متى تستخدم المصفوفات. متى تستخدم الكائنات.
- لا يدعم JavaScript المصفوفات الترابطية.
- يجب عليك استخدام الكائنات عندما تريد أن تكون أسماء العناصر سلاسل (نص) .
- يجب عليك استخدام المصفوفات عندما تريد أن تكون أسماء العناصر أرقامًا .
صفيف JavaScript جديد ()
يحتوي JavaScript على مُنشئ مصفوفة مضمّن new Array().
ولكن يمكنك استخدامها بأمان []بدلاً من ذلك.
تعمل هاتان العبارتان المختلفتان على إنشاء مصفوفة فارغة جديدة باسم النقاط:
const points = new Array();
const points = [];
تعمل هاتان العبارتان المختلفتان على إنشاء مصفوفة جديدة تحتوي على 6 أرقام:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
يمكن newللكلمة الرئيسية أن تنتج بعض النتائج غير المتوقعة:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
خطأ شائع
const points = [40];
ليس مثل:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
كيفية التعرف على المصفوفة
السؤال الشائع هو: كيف أعرف ما إذا كان المتغير عبارة عن مصفوفة؟
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.