المصفوفات في لغة JavaScript

يا هلا بالجميع! اليوم راح نتكلم عن المصفوفات في JavaScript. الموضوع بسيط ومهم جداً لأي مبرمج.

إيش هي المصفوفة (Array)؟

بكل بساطة، المصفوفة هي عبارة عن قائمة مرتبة من القيم. تخيلها كرفوف مكتبة، كل رف عليه كتاب (قيمة)، والكتب مرتبة من اليمين لليسار أو العكس. في JavaScript، ممكن المصفوفة تحتوي على أي نوع من البيانات: أرقام، نصوص، كائنات، وحتى مصفوفات أخرى!

كيف نسوي مصفوفة؟

فيه طريقتين أساسيتين:

1. الطريقة الشائعة (والمفضلة): استخدام الأقواس المربعة []

هذي أسهل وأكثر طريقة تستخدمها:

let fruits = ["تفاح", "برتقال", "موز"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["نص", 123, true, { name: "كائن" }];

2. استخدام الكائن new Array()

هذي الطريقة أقل استخداماً لكنها موجودة:

let cars = new Array("تويوتا", "هوندا", "فورد");
let emptyArray = new Array(5); // ينشئ مصفوفة بخمسة عناصر فارغة (empty slots)

ملاحظة سريعة: الطريقة الأولى [] أفضل وأكثر وضوحاً. استخدمها دائماً إلا إذا كان عندك سبب قوي جداً لاستخدام new Array().

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

عشان توصل لأي عنصر في المصفوفة، تستخدم الفهرس (Index). الفهرس يبدأ من 0 (يعني أول عنصر هو في الفهرس 0، الثاني في الفهرس 1، وهكذا).

let colors = ["أحمر", "أخضر", "أزرق"];
console.log(colors[0]); // الناتج: "أحمر"
console.log(colors[1]); // الناتج: "أخضر"
console.log(colors[2]); // الناتج: "أزرق"
console.log(colors[3]); // الناتج: undefined (لأن العنصر غير موجود)

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

تقدر تغير قيمة أي عنصر عن طريق الفهرس حقه:

let cities = ["الرياض", "جدة", "الدمام"];
cities[1] = "مكة";
console.log(cities); // الناتج: ["الرياض", "مكة", "الدمام"]

طول المصفوفة (.length)

عشان تعرف كم عنصر في المصفوفة، استخدم خاصية length:

let fruits = ["تفاح", "برتقال", "موز"];
console.log(fruits.length); // الناتج: 3

نصيحة: آخر عنصر في المصفوفة دايماً يكون في الفهرس array.length - 1.

أهم دوال (Methods) المصفوفات

JavaScript توفر لك دوال كثيرة تسهل التعامل مع المصفوفات. هذي أهمها:

1. إضافة عناصر: push() و unshift()

• push(): تضيف عنصر أو أكثر لنهاية المصفوفة.
• unshift(): تضيف عنصر أو أكثر لبداية المصفوفة.

let tasks = ["قراءة كتاب", "الرد على الإيميلات"];
tasks.push("ممارسة الرياضة");
console.log(tasks); // الناتج: ["قراءة كتاب", "الرد على الإيميلات", "ممارسة الرياضة"]

tasks.unshift("الاستيقاظ مبكراً");
console.log(tasks); // الناتج: ["الاستيقاظ مبكراً", "قراءة كتاب", "الرد على الإيميلات", "ممارسة الرياضة"]

2. حذف عناصر: pop() و shift()

• pop(): تحذف آخر عنصر من المصفوفة وترجعه.
• shift(): تحذف أول عنصر من المصفوفة وترجعه.

let items = ["قلم", "دفتر", "ممحاة"];
let lastItem = items.pop();
console.log(items); // الناتج: ["قلم", "دفتر"]
console.log(lastItem); // الناتج: "ممحاة"

let firstItem = items.shift();
console.log(items); // الناتج: ["دفتر"]
console.log(firstItem); // الناتج: "قلم"

3. البحث عن عناصر: indexOf() و includes()

• indexOf(): ترجع الفهرس لأول ظهور للعنصر، أو -1 لو ما لقت العنصر.
• includes(): ترجع true لو العنصر موجود، و false لو مو موجود.

let students = ["أحمد", "سارة", "علي", "أحمد"];
console.log(students.indexOf("سارة")); // الناتج: 1
console.log(students.indexOf("خالد")); // الناتج: -1
console.log(students.indexOf("أحمد", 1)); // الناتج: 3 (يبدأ البحث من الفهرس 1)

console.log(students.includes("علي")); // الناتج: true
console.log(students.includes("فاطمة")); // الناتج: false

4. تحويل المصفوفة إلى نص: join()

تحول كل عناصر المصفوفة إلى نص واحد، وتفصل بينهم بالفاصل اللي تحدده (الفاصل الافتراضي هو الفاصلة ,).

let words = ["أهلاً", "يا", "عالم"];
let sentence = words.join(" ");
console.log(sentence); // الناتج: "أهلاً يا عالم"

let csv = ["apple", "banana", "orange"].join(",");
console.log(csv); // الناتج: "apple,banana,orange"

5. استخلاص جزء من المصفوفة: slice()

تنشئ مصفوفة جديدة تحتوي على جزء من المصفوفة الأصلية، بدون ما تغير المصفوفة الأصلية.

let animals = ["أسد", "نمر", "فيل", "زرافة", "قرد"];
let jungleAnimals = animals.slice(0, 3); // من الفهرس 0 إلى ما قبل الفهرس 3
console.log(jungleAnimals); // الناتج: ["أسد", "نمر", "فيل"]
console.log(animals); // الناتج: ["أسد", "نمر", "فيل", "زرافة", "قرد"] (الأصلية لم تتغير)

let someAnimals = animals.slice(2); // من الفهرس 2 إلى النهاية
console.log(someAnimals); // الناتج: ["فيل", "زرافة", "قرد"]

6. تغيير المصفوفة الأصلية: splice()

هذي الدالة قوية جداً! تقدر تحذف أو تضيف أو تستبدل عناصر في أي مكان بالمصفوفة الأصلية.

• splice(startIndex, deleteCount): تحذف deleteCount من العناصر بدءاً من startIndex.
• splice(startIndex, deleteCount, item1, item2, ...): تحذف وتضيف عناصر جديدة.

let drinks = ["قهوة", "شاي", "عصير", "ماء"];

// حذف عنصر واحد من الفهرس 1
drinks.splice(1, 1);
console.log(drinks); // الناتج: ["قهوة", "عصير", "ماء"]

// حذف عنصرين من الفهرس 0 وإضافة "حليب" و "نسكافيه"
drinks.splice(0, 2, "حليب", "نسكافيه");
console.log(drinks); // الناتج: ["حليب", "نسكافيه", "ماء"]

// إضافة عنصر في الفهرس 1 بدون حذف أي شيء (deleteCount = 0)
drinks.splice(1, 0, "شوكولاتة");
console.log(drinks); // الناتج: ["حليب", "شوكولاتة", "نسكافيه", "ماء"]

7. التكرار على العناصر: forEach(), map(), filter(), reduce()

هذي دوال اللوب (Loop) الحديثة والمفضلة في JavaScript.

forEach(): لتنفيذ دالة لكل عنصر

let names = ["ريم", "سعود", "فهد"];
names.forEach(function(name, index) {
    console.log(الاسم رقم ${index + 1}: ${name});
});
// الناتج:
// الاسم رقم 1: ريم
// الاسم رقم 2: سعود
// الاسم رقم 3: فهد

map(): لإنشاء مصفوفة جديدة بتطبيق دالة على كل عنصر

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

let numbers = [1, 2, 3];
let doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // الناتج: [2, 4, 6]

filter(): لإنشاء مصفوفة جديدة بالعناصر اللي تحقق شرط معين

ترجع مصفوفة جديدة تحتوي فقط على العناصر اللي ترجع true من الدالة.

let ages = [10, 22, 15, 30, 8];
let adults = ages.filter(age => age >= 18);
console.log(adults); // الناتج: [22, 30]

reduce(): لتقليص المصفوفة لقيمة واحدة

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

let prices = [100, 50, 200];
let total = prices.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // الناتج: 350 (0 هي القيمة الابتدائية للمجمع)

ملاحظات مهمة

• المصفوفات كائنات (Objects): في JavaScript، المصفوفات تعتبر نوع خاص من الكائنات. هذا يعني أن لها خصائص ودوال (methods).
• أنواع بيانات مختلطة: تقدر تحط أي نوع من البيانات في نفس المصفوفة.
• تمرير بالمرجع (Pass by Reference): لما تمرر مصفوفة لدالة، أو تسند مصفوفة لمتحول جديد، أنت ما تنسخ المصفوفة. أنت تمرر مرجع لنفس المصفوفة في الذاكرة. أي تغيير على المصفوفة الجديدة راح يأثر على الأصلية.

let originalArray = [1, 2, 3];
let newArray = originalArray; // newArray الآن يشير لنفس المصفوفة

newArray.push(4);

console.log(originalArray); // الناتج: [1, 2, 3, 4]
console.log(newArray); // الناتج: [1, 2, 3, 4]

لتجنب التغيير غير المقصود: إذا تبغى تنسخ المصفوفة وتشتغل عليها بشكل مستقل، استخدم slice() بدون معاملات، أو عامل الانتشار ... (Spread Operator) مثل let copiedArray = [...originalArray];.

وبكذا نكون غطينا أساسيات المصفوفات في JavaScript. تدربوا عليها كثير لأنها أساسية في أي تطبيق!

← السابقالفهرسالتالي →