الكائن Array في JavaScript

الكائن Array يُستخدَم في إنشاء المصفوفات، والتي هي قوائم شبيهة بالكائنات.

إنشاء مصفوفة

var fruits = ['Apple', 'Banana'];

console.log(fruits.length);
// 2

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

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

المرور على عناصر المصفوفة بحلقة تكرار

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

إضافة عنصر في نهاية المصفوفة

var newLength = fruits.push('Orange');
// ["Apple", "Banana", "Orange"]

إزالة عنصر من نهاية المصفوفة

var last = fruits.pop(); // إزالة Orange (من النهاية)
// ["Apple", "Banana"];

إزالة عنصر من بداية المصفوفة

var first = fruits.shift(); // إزالة Apple (من البداية)
// ["Banana"];

إضافة عنصر في بداية المصفوفة

var newLength = fruits.unshift('Strawberry');
// ["Strawberry", "Banana"];

العثور على فهرس أحد عناصر المصفوفة

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

حذف عنصر في فهرس معيّن

var removedItem = fruits.splice(pos, 1);
// ["Strawberry", "Mango"]

إزالة عناصر بعدد معيّن بدءًا من فهرسٍ مُحدَّد

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 

console.log(vegetables); 
// ["Cabbage", "Carrot"] (ستُغيّر المصفوفة الأصلية)

console.log(removedItems); 
// ["Turnip", "Radish"]

نسخ مصفوفة

var shallowCopy = fruits.slice();
// ["Strawberry", "Mango"]

البنية العامة

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

elementN

تهيئة مصفوفة فيها العناصر التي قد مُرِّرَت إليها، إلا إذا مررنا وسيطًا وحيدًا إلى الدالة البانية Array وكان هذا الوسيط رقمًا (انظر المعامل arrayLength أدناه). لاحظ أنَّ الحالة الخاصة السابقة تُطبَّق على المصفوفات المُنشَأة عبر الدالة البانية Array، وليس على المصفوفات المُنشَأة بالشكل المختصر.

arrayLength

إذا مررنا وسيطًا وحيدًا إلى الدالة البانية Array وكان هذا الوسيط عددًا صحيحًا موجبًا من 0 إلى ‎2³²-1، فستُعاد مصفوفةٌ مع ضبط قيمة الخاصية length فيها إلى هذا العدد (وهذا يُشير إلى مصفوفة لها خانات فارغة بعدد arrayLength، ولن تكون هذه الخانات مرتبطةً مع القيمة undefined). إذا كان الوسيط أيّ عدد ليس من المجال السابق، فسيرمى الاستثناء RangeError.

الوصف

المصفوفات هي كائنات شبيهة بالقوائم (list-like) التي يملك كائن prototype فيها دوالًا تُستخدَم لإجراء عمليات التحويل والتعديل على المصفوفات. لاحظ أنَّ طول المصفوفات أو نوع العناصر ليسا ثابتين.

لا يمكن استخدام السلاسل النصية كفهارس للعناصر في المصفوفات (كما في المصفوفات الترابطية)، وإنما يجب استخدام الأعداد الصحيحة فقط، ومحاولة ضبط أو الوصول إلى الفهارس غير العددية باستخدام طريقة الأقواس (أو طريقة النقط) لن يؤدي إلى ضبط أو الحصول على أحد عناصر المصفوفة، لكنه سيضبط أو يصل إلى خاصية مرتبطة بتلك المصفوفة؛ لاحظ أنَّ خاصيات المصفوفة وعناصرها هما أمران منفصلان عن بعضهما تمامًا، ولا يمكن استخدام دوال تعديل المصفوفات على الخاصيات التابعة لها.

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

يبدأ عدّ العناصر في JavaScript من الفهرس 0، أي أنَّ أوّل عنصر في المصفوفة له الفهرس 0، وفهرس آخر عنصر هو قيمة الخاصية length مطروحًا منها 1؛ لاحظ أنَّ استخدام فهارس غير صالحة سيؤدي إلى إعادة القيمة undefined.

var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
console.log(arr[0]);              // 'this is the first element'
console.log(arr[1]);              // 'this is the second element'
console.log(arr[arr.length - 1]); // 'this is the last element'

يجدر بالذكر أنَّ عناصر المصفوفة هي خاصياتٌ تابعةٌ لها أيضًا (أي أنَّها مثل الخاصية toString)، لكن إذا حاولنا الوصول إلى عناصر المصفوفة بالطريقة الآتية فسيُسبِّب برمي الاستثناء SyntaxError، وذلك لأنَّ اسم الخاصية غير صالح:

console.log(arr.0); // SyntaxError

سببُ ذلك الخطأ ليس تابعًا للمصفوفات، وإنما لا يمكن أن الإشارة إلى الخاصيات التي تبدأ برقم باستخدام طريقة النقط، ويجب حينئذٍ استخدام طريقة الأقواس. على سبيل المثال، إذا كان لدينا كائنٌ له خاصيةٌ اسمها 3d فلن نتمكن من الإشارة إليها إلا عبر طريقة الأقواس.

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // SyntaxError
console.log(years[0]);  // تعمل دون مشاكل

renderer.3d.setTexture(model, 'character.png');     // SyntaxError
renderer['3d'].setTexture(model, 'character.png');  // تعمل دون مشاكل

لاحظ أنَّ اسم الخاصية 3d قد وضعناه بين علامتي اقتباس '3d'، ومن الممكن وضع علامات اقتباس لفهارس عناصر المصفوفات (مثلًا: ‎years['2']‎‎ بدلًا من years[2]‎) لكن ذلك ليس ضروريًا. إذ إنَّ القيمة 2 في years[2]‎ ستحوّل إلى سلسلة نصية من محرِّك JavaScript باستخدام toString، ولهذا السبب ستجد أنَّ الفهرسين '2' و '02' يشيران إلى خانتين مختلفتين في كائن years، وستكون نتيجة السطر البرمجي الآتي هي true:

console.log(years['2'] != years['02']);

العلاقة بين length والخاصيات الرقمية

ترتبط الخاصية length التابعة للمصفوفات مع قيم الخاصيات الرقمية (فهارس العناصر)؛ وعدد من الدوال المُضمَّنة في الكائن Array (مثلًا: join و slice و indexOf ...إلخ.) تأخذ قيمة الخاصية length التابعة للمصفوفة عند استدعائها بالحسبان؛ أما الدوال الأخرى (مثل push و splice) ستؤدي إلى تحديثات على قيمة length.

var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3

عند إضافة عنصر إلى مصفوفة وله فهرسٌ سليمٌ لكنه خارج حدود المصفوفة، فسيُحدِّث محرِّك JavaScript قيمة الخاصية length بما يناسب:

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

أما زيادة قيمة الخاصية length يدويًا فلن تؤثر على شيء إلا على قيمة الخاصية نفسها:

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

لكن إنقاص قيمة الخاصية length سيؤدي إلى حذف العناصر:

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

هذا السلوك مشروحٌ بالتفصيل في صفحة الخاصية Array.length.

إنشاء مصفوفة عند مطابقة نمط في سلسلة نصية

إنَّ نتيجة المطابقة التي تحدث بين التعابير النمطية والسلاسل النصية ستؤدي إلى إنشاء مصفوفات، وهذه المصفوفة لها خاصيات وعناصر التي يمكن استخدامها للحصول على معلومات عن المطابقة؛ ستُعاد مثل هذه المصفوفة من الدوال RegExp.exec و String.match و String.replace. ألقِ نظرةً على المثال الآتي (الذي يُطابِق الحرف d المتبوع بحرف b واحد أو أكثر والمتبوع بحرف d واحد، لاحظ كيفية استخدام الراية i لتجاهل حالة الأحرف) ثم أمعن النظر في الجدول الذي يليه:

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

الجدول الآتي يوضِّح خاصيات وعناصر المصفوفة المعادة من المثال السابق:

الخاصية/العنصر	الوصف	مثال
input	خاصية للقراءة فقط تُشير إلى السلسلة النصية الأصلية التي جرت عملية المُطابَقة عليها.	cdbBdbsbz
index	خاصية للقراءة فقط تحتوي على فهرس بداية السلسلة النصية المُطابَقة.	1
[0]	عنصر للقراءة فقط الذي يُشير إلى السلسلة النصية الفرعية التي جرت مطابقتها.	dbBd
‎[1], ...[n]‎	عناصر للقراءة فقط تحتوي على السلاسل النصية الفرعية التي جرت مطابقتها من الأنماط الفرعية الموجودة بين قوسين.	‎‎[1]: bB ‎[2]: d‎

الخاصيات التابعة للدالة البانية Array

Array.length

قيمة الخاصية length التابعة للدالة البانية Array هي 1.

Array.prototype

تسمح هذه الخاصية بإضافة خاصيات متاحة لجميع الكائنات التي نوعها هو Array.

الدوال التابعة للدالة البانية Array

Array.from()‎

إنشاء مصفوفة جديدة من كائن شبيه بالمصفوفات.

Array.isArray()‎

إعادة true إذا كانت المتغير مصفوفةً، و false فيما عدا ذلك.

Array.of()‎

إنشاء مصفوفة جددة من عدد متغير من الوسائط، بغض النظر عن نوع تلك الوسائط.

الكائن prototype

النسخ المُنشَأة من الدالة البانية Array ترث الدوال والخاصيات من كائن Array.prototype؛ وكما في جميع الدوال البانية، يمكنك إجراء تغييرات إلى كائن prototype في الدالة البانية لكي تنعكس تلك التعديلات إلى جميع نسخ الكائن Array.

الخاصيات

Array.prototype.constructor

تُحديد الدالة التي ستُنشِئ كائن prototype التابع للكائن Array؛ راجع صفحة الخاصية Object.prototype.constructor لمزيدٍ من التفاصيل.

Array.prototype.length

إعادة عدد العناصر الموجودة في المصفوفة.

دوال التحويل

هذه الدوال تُعدِّل المصفوفة نفسها.

Array.prototype.copyWithin()‎

نسخ سلسلة من عناصر المصفوفة إلى مكانٍ آخر داخلها.

Array.prototype.fill()‎

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

Array.prototype.pop()‎

إزالة آخر عنصر من المصفوفة وإعادة ذلك العنصر.

Array.prototype.push()‎

إضافة عنصر أو أكثر إلى نهاية المصفوفة، وإعادة طول المصفوفة الجديدة.

Array.prototype.reverse()‎

عكس ترتيب عناصر المصفوفة، أي أنَّ أوّل عنصر سيصبح الأخير وآخر عنصر سيصبح الأوّل.

Array.prototype.shift()‎

إزالة أوّل عنصر من المصفوفة وإعادة ذلك العنصر.

Array.prototype.sort()‎

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

Array.prototype.splice()‎

إضافة أو إزالة عناصر من مصفوفة.

Array.prototype.unshift()‎

إضافة عنصر أو أكثر في بداية المصفوفة، وإعادة طول المصفوفة الجديدة.

دوال الوصول

هذه الدوال لا تُعدِّل المصفوفة، وستُعيد مصفوفةً جديدةً.

Array.prototype.concat()‎

إعادة مصفوفة جديدة تتألف من جمع المصفوفة الحالية مع مصفوفات أو قيم أخرى.

Array.prototype.includes()‎

تحديد إذا كانت المصفوفة تحتوي على عنصر معيّن، وتُعيد true أو false.

Array.prototype.indexOf()‎

إعادة أوّل فهرس للعنصر الموجود في الدالة والذي يساوي القيمة المُحدَّدة، أو القيمة -1 إن لم يُعثَر على مُطابَقة.

Array.prototype.join()‎

جمع جميع عناصر المصفوفة في سلسلة نصية.

Array.prototype.lastIndexOf()‎

إعادة آخر فهرس للعنصر الموجود في الدالة والذي يساوي القيمة المُحدَّدة، أو القيمة -1 إن لم يُعثَر على مُطابَقة.

Array.prototype.slice()‎

استخراج قسم من المصفوفة وإعادة مصفوفة جديدة.

Array.prototype.toString()‎

إعادة سلسلة نصية تُمثِّل المصفوفة وعناصرها، وهي إعادة تعريف للدالة Object.prototype.toString.

دوال المرور على عناصر المصفوفة

Array.prototype.entries()‎

إعادة كائن Array Iterator الذي يحتوي على أزواج «المفتاح/القيمة» لكل فهرس في المصفوفة.

Array.prototype.every()‎

إعادة true إذا كانت جميع عناصر المصفوفة تحقق الشرط الموجود في دالة الاختبار.

Array.prototype.filter()‎

إنشاء مصفوفة جديدة مع جميع عناصر هذه المصفوفة التي تجعل دالة الاختبار تُعيد true.

Array.prototype.find()‎

إعادة القيمة التي عُثِرَ عليها في المصفوفة، وذلك إذا كان أحد عناصر المصفوفة يحقق دالة الاختبار المُعطاة، أو ستُعاد القيمة undefined فيما عدا ذلك.

Array.prototype.findIndex()‎

إعادة الفهرس التي عُثِرَ عليه في المصفوفة، وذلك إذا كان أحد عناصر المصفوفة يحقق دالة الاختبار المُعطاة، أو ستُعاد القيمة -1 فيما عدا ذلك.

Array.prototype.forEach()‎

استدعاء دالة لكل عنصر موجود في المصفوفة.

Array.prototype.keys()‎

إعادة كائن Array Iterator الذي يحتوي على كل فهرس في المصفوفة.

Array.prototype.map()‎

إنشاء مصفوفة جديدة اعتمادًا على نتائج استدعاء دالة مُعيّنة على كل عنصر من عناصر المصفوفة.

Array.prototype.reduce()‎

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

Array.prototype.reduceRight()‎

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

Array.prototype.some()‎

إعادة true إذا كان هنالك عنصرٌ واحدٌ من عناصر المصفوفة يُحقِّق دالة الاختبار المعطية.

Array.prototype.values()‎

إعادة كائن Array Iterator الذي يحتوي على كل قيمة في المصفوفة.

أمثلة

إنشاء مصفوفة

المثال الآتي يُنشِئ مصفوفةً باسم msgArray طولها (length) هو 0، ثم يُسنِد قيمًا إلى msgArray[0]‎ و msgArray[99]‎، مما يُغيّر طول المصفوفة إلى 100:

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}

إنشاء مصفوفة ثنائية الأبعاد

المثال الآتي يُنشِئ رقعة شطرنج باستخدام مصفوفة ثنائية الأبعاد تتألف من سلاسل نصية، وأوّل حركة في الرقعة تمت بنسخ 'p' من (6,4) إلى (4,4):

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// تحريك البيدق أمام الملك خطوتين
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

هذه مخرجات المثال السابق:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

استخدام مصفوفة لإنشاء جدول من القيم

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

الناتج:

0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	نعم	نعم	نعم	نعم	نعم

انظر إلى صفحة كل خاصية ودالة تابعة للكائن Array لتفاصيل عن دعم المتصفحات لها.

مصادر ومواصفات

• مسودة المعيار ECMAScript Latest Draft. أضاف هذا المعيار الدالة includes.
• معيار ECMAScript 2015 (6th Edition)‎. أضاف هذا المعيار الدوال from و of و find و findIndex و fill و copyWithin.
• معيار ECMAScript 5.1. أضاف هذا المعيار الدوال isArray و indexOf و lastIndexOf و every و some و forEach و map و filter و reduce و reduceRight.
• معيار ECMAScript 1st Edition .