فهم المصفوفات في الجافاسكربت: دليل شامل ومفصل

تُعتبر المصفوفات (Arrays) من أهم البُنى البيانية في لغات البرمجة، وتكتسب أهمية كبيرة في لغة الجافاسكربت (JavaScript) نظراً لدورها المحوري في تنظيم البيانات وتخزينها بترتيب معين يمكن التعامل معه بسهولة ومرونة. المصفوفة هي ببساطة قائمة مرتبة من القيم، حيث يمكن أن تحتوي على أنواع بيانات متعددة مثل الأرقام، النصوص، الكائنات، وحتى مصفوفات أخرى، مما يمنح المطورين القدرة على بناء هياكل بيانات معقدة وتحقيق أهداف برمجية متنوعة.

في هذا المقال سنتناول المصفوفات في الجافاسكربت من كافة جوانبها بشكل تفصيلي مع الأمثلة التوضيحية، لنقدم لك رؤية شاملة تمكنك من التعامل مع هذه البنية بكفاءة عالية.

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

المصفوفة في جافاسكربت هي كائن (Object) يمثل مجموعة مرتبة من العناصر يمكن الوصول إليها عن طريق الفهارس (indexes)، حيث يبدأ الترقيم من الصفر (0). وتُستخدم لتخزين عدة قيم تحت متغير واحد، مما يسهل التعامل معها بدلاً من إنشاء متغير لكل قيمة على حدة.

طريقة تعريف المصفوفة

يمكن تعريف المصفوفة باستخدام إما الأقواس المربعة [] أو باستخدام الكلمة المفتاحية new Array()، لكن الطريقة الأكثر شيوعاً والأكثر كفاءة هي استخدام الأقواس المربعة:

javascript
CopyEdit
let fruits = ['تفاح', 'موز', 'برتقال'];

أو

javascript
CopyEdit
let numbers = new Array(10, 20, 30);

يُفضل استخدام الطريقة الأولى نظراً لسهولة القراءة والأداء الأفضل.

الوصول إلى عناصر المصفوفة وتعديلها

العناصر في المصفوفة تُحدد بموقعها الذي يُسمى “الفهرس” أو “الاندكس”، والاندكس يبدأ من الصفر. للوصول إلى عنصر معين، نستخدم اسم المصفوفة متبوعاً بالفهرس داخل الأقواس المربعة.

مثال:

javascript
CopyEdit
console.log(fruits[0]); // تفاح
console.log(fruits[2]); // برتقال

ولتغيير قيمة عنصر معين:

javascript
CopyEdit
fruits[1] = 'كيوي';
console.log(fruits); // ['تفاح', 'كيوي', 'برتقال']

خصائص المصفوفة في جافاسكربت

أحد أهم خصائص المصفوفة هو طولها، والذي يمثل عدد العناصر فيها، ويمكن الحصول عليه من خلال الخاصية length.

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

ميزة مهمة أن length يمكن تعديلها لتقصير أو تمديد المصفوفة:

javascript
CopyEdit
fruits.length = 2;
console.log(fruits); // ['تفاح', 'كيوي']

أو

javascript
CopyEdit
fruits.length = 5;
console.log(fruits); // ['تفاح', 'كيوي', undefined, undefined, undefined]

لكن عادة لا يُنصح بتعديل الطول بهذه الطريقة لأنها قد تسبب سلوكاً غير متوقع.

أنواع البيانات داخل المصفوفة

تدعم جافاسكربت تخزين أي نوع من البيانات داخل المصفوفة، بما في ذلك:

• أعداد صحيحة وعشرية

• نصوص (Strings)

• قيم منطقية (Boolean)

• كائنات (Objects)

• دوال (Functions)

• حتى مصفوفات أخرى (تشكيل مصفوفة متعددة الأبعاد)

مثال:

javascript
CopyEdit
let mixedArray = [10, 'نص', true, {name: 'محمد'}, [1, 2, 3], function() { return 'مرحباً'; }];
console.log(mixedArray[3].name); // محمد
console.log(mixedArray[4][1]);  // 2
console.log(mixedArray[5]());   // مرحباً

التعامل مع المصفوفات متعددة الأبعاد

المصفوفات متعددة الأبعاد هي مصفوفات تحتوي عناصرها مصفوفات أخرى. يمكن اعتبارها كجداول أو مصفوفات من مصفوفات.

مثال على مصفوفة ثنائية الأبعاد:

javascript
CopyEdit
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[0][1]); // 2
console.log(matrix[2][2]); // 9

تُستخدم هذه المصفوفات في العديد من التطبيقات مثل الرسومات، الألعاب، الحسابات الرياضية، وغيرها.

أهم الطرق والوظائف المدمجة في المصفوفات

توفّر جافاسكربت مجموعة واسعة من الدوال والطرق المدمجة التي تسهّل التعامل مع المصفوفات بشكل مرن وفعال، من أهمها:

1. push() و pop()

• push() لإضافة عنصر أو أكثر إلى نهاية المصفوفة.

• pop() لإزالة آخر عنصر من المصفوفة وإرجاعه.

javascript
CopyEdit
fruits.push('أناناس'); // ['تفاح', 'كيوي', 'أناناس']
let lastFruit = fruits.pop(); // 'أناناس'

2. shift() و unshift()

• shift() لإزالة أول عنصر من المصفوفة وإرجاعه.

• unshift() لإضافة عنصر أو أكثر إلى بداية المصفوفة.

javascript
CopyEdit
let firstFruit = fruits.shift(); // 'تفاح'
fruits.unshift('عنب'); // ['عنب', 'كيوي']

3. splice()

تُستخدم لإضافة أو إزالة عناصر في أي موقع من المصفوفة.

javascript
CopyEdit
fruits.splice(1, 1, 'مانجو', 'بابايا');
// عند الفهرس 1، إزالة عنصر واحد، ثم إضافة 'مانجو' و 'بابايا'
console.log(fruits); // ['عنب', 'مانجو', 'بابايا']

4. slice()

تُستخدم لأخذ جزء من المصفوفة دون تعديل الأصلية.

javascript
CopyEdit
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['مانجو', 'بابايا']

5. concat()

لدمج مصفوفتين أو أكثر في مصفوفة جديدة.

javascript
CopyEdit
let tropical = ['أناناس', 'جوافة'];
let allFruits = fruits.concat(tropical);

6. indexOf() و lastIndexOf()

للبحث عن موضع عنصر معين.

javascript
CopyEdit
let idx = fruits.indexOf('مانجو'); // 1

7. forEach()

لتنفيذ دالة معينة لكل عنصر في المصفوفة.

javascript
CopyEdit
fruits.forEach(function(item, index) {
  console.log(`${index}: ${item}`);
});

8. map()

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

javascript
CopyEdit
let lengths = fruits.map(fruit => fruit.length);
console.log(lengths);

9. filter()

تُستخدم لإنشاء مصفوفة جديدة تحتوي على العناصر التي تحقق شرط معين.

javascript
CopyEdit
let longFruits = fruits.filter(fruit => fruit.length > 4);

10. reduce()

تُستخدم لتجميع قيم المصفوفة في قيمة واحدة.

javascript
CopyEdit
let totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);

الفرق بين المصفوفة والكائن في جافاسكربت

رغم أن المصفوفة هي نوع خاص من الكائنات، إلا أن هناك فرقاً جوهرياً بينها وبين الكائنات التقليدية:

• المصفوفة: تحتوي على عناصر مرتبة، ويمكن الوصول إليها عبر الأرقام (المؤشرات).

• الكائن: يحتوي على خصائص يتم الوصول إليها عبر المفاتيح (مفاتيح نصية عادة).

يمكن اعتبار المصفوفة أداة لتنظيم البيانات المرتبة، بينما الكائن هو وسيلة لتمثيل البيانات الغير مرتبة والمتنوعة.

كيفية التحقق من أن المتغير هو مصفوفة

جافاسكربت لا تعتبر المصفوفة نوعاً منفصلاً، لذلك لا يمكن استخدام typeof فقط.

الأفضل استخدام الدالة المدمجة:

javascript
CopyEdit
Array.isArray(fruits); // true

أو استخدام:

javascript
CopyEdit
fruits instanceof Array; // true

الأداء والاعتبارات المتعلقة بالمصفوفات في جافاسكربت

المصفوفات في جافاسكربت تتميز بأداء جيد عند التعامل مع البيانات المرتبة، ولكن يجب الانتباه إلى بعض الأمور:

• تعديل طول المصفوفة بشكل مباشر قد يؤدي إلى نتائج غير متوقعة.

• استخدام الطرق المدمجة مثل push و pop يعد أكثر كفاءة من تعديل الفهارس مباشرة.

• استخدام المصفوفات الكبيرة جداً قد يؤثر على سرعة التطبيق، لذلك يمكن التفكير في استخدام هياكل بيانات أخرى عند الحاجة.

ملخص المقارنة بين بعض الطرق الشائعة في جافاسكربت

تطبيقات عملية للمصفوفات في الجافاسكربت

1. تخزين وإدارة قوائم البيانات

المصفوفات هي الوسيلة الأساسية لتخزين قوائم من البيانات مثل أسماء المستخدمين، المنتجات، أو الرسائل.

2. تنظيم البيانات لواجهات المستخدم

تستخدم في بناء قوائم ديناميكية، جداول، وعناصر قابلة للتكرار في صفحات الويب.

3. تنفيذ الخوارزميات

يمكن استغلال المصفوفات في تنفيذ خوارزميات البحث، الفرز، والترشيح بطريقة سهلة وفعالة.

الخلاصة

المصفوفات في جافاسكربت هي أداة أساسية لا غنى عنها في تطوير البرمجيات الحديثة. تتيح للمبرمجين تخزين البيانات بشكل منظم، والتعامل مع مجموعات من العناصر بمرونة عالية، باستخدام مجموعة كبيرة من الدوال والطرق المدمجة التي تسهل العمليات اليومية. بامتلاك فهم عميق للمصفوفات وكيفية التعامل معها، يمكن لأي مطور جافاسكربت بناء تطبيقات أكثر قوة وفاعلية.

المراجع

• MDN Web Docs – Array – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

• JavaScript.info – Arrays – https://javascript.info/array