Front-End

كيف تفهم الكائنات والمصفوفات في JavaScript بسهولة؟

صورة
Mahmoud Adel
اخر تحديث :

إذا كنت مبتدئًافي JavaScript أو حتى لديك بعض الخبرة، فإن تعلم الكائنات والمصفوفات يُعد من الركائزالأساسية لتطوير تطبيقات ويب متقدمة.

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

كيف تفهم الكائنات والمصفوفات في JavaScript بسهولة؟
كيف تفهم الكائنات والمصفوفات في JavaScript بسهولة؟

مقدمة عن المصفوفات (Arrays) في JavaScript

في الدروس السابقة، تعلمنا كيفية استخدام الدوال (Functions) لجعل الكود أكثر بساطة وقابلية لإعادة الاستخدام. لكن ماذا لو احتجنا للتعامل مع كمية كبيرة من البيانات في نفس الوقت؟ لقد تعاملنا حتى الآن مع القليل من البيانات مثل الأرقام والنصوص والقيم المنطقية (Booleans)، ولكن ماذا يحدث عندما نحتاج إلى إدارة مجموعة ضخمة من البيانات؟

لنتخيل أننا نملك متجرًا لبيع الكعك (Donuts). لدينا أنواع عديدة من الكعك، مثل:
- الكعك المزين بالسكر - الكعك المغطى بالشوكولاتة - الكعك البودرة - الكعك المغطى بالرشات الملونة - الكعك بجوز الهند - وأخيرًا، قطع الكعك الصغيرة

عدد كبير من الأنواع، أليس كذلك؟ تخيل محاولة إدارة كل هذه الأنواع باستخدام متغير منفصل لكل نوع. سيكون الأمر مرهقًا جدًا! وهنا يأتي دور المصفوفات (Arrays).

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

المصفوفة هي نوع من البيانات في JavaScript يمكننا استخدامه لتخزين مجموعة من القيم داخل متغير واحد.
واحدة من الميزات الرائعة للمصفوفات هي أن القيم المخزنة تكون مرتبة. بمعنى آخر، كل عنصر في المصفوفة يكون له رقم (أو فهرس) يمكننا استخدامه للوصول إلى هذا العنصر.

ملحوظة: الفهرس (Index) يبدأ من الرقم 0 وليس 1، لكننا سنتحدث عن هذا بمزيد من التفصيل لاحقًا.

في هذا القسم، سنتعلم كيفية استخدام المصفوفات في JavaScript، وكيفية تنظيم البيانات داخلها، ولماذا تعتبر أداة قوية للمبرمجين.

استعد للغوص في عالم المصفوفات واكتشاف كيفية تسهيلها لتنظيم البيانات وإدارتها بكفاءة!

إنشاء مصفوفة للكعك

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

لإدارة كل أنواع الكعك الخاصة بنا، سنقوم بإنشاء مصفوفة تحتوي على قائمة بجميع الأنواع. دعنا نرى كيف يمكننا القيام بذلك خطوة بخطوة:

  1. الكود الأولي:
    في البداية، لدينا مجموعة متغيرات منفصلة لكل نوع من الكعك، كما يلي:
var glazedDonuts = "Glazed Donuts";
var chocolateFrosted = "Chocolate Frosted Donuts";
var powderedDonuts = "Powdered Donuts";
var sprinkledDonuts = "Sprinkled Donuts";
var coconutDonuts = "Coconut Donuts";
var donutHoles = "Donut Holes";
  1. تحويل الكود إلى مصفوفة:
    بدلاً من استخدام كل هذه المتغيرات، يمكننا إنشاء متغير واحد يحتوي على كل هذه الأنواع داخل مصفوفة. الخطوات هي:
  • إنشاء متغير جديد يُسمى donuts وتعيينه إلى مصفوفة فارغة باستخدام الأقواس المربعة:
var donuts = [];
  • وضع جميع الأنواع السابقة داخل المصفوفة وفصل كل عنصر باستخدام فاصلة:
var donuts = [
  "Glazed Donuts",
  "Chocolate Frosted Donuts",
  "Powdered Donuts",
  "Sprinkled Donuts",
  "Coconut Donuts",
  "Donut Holes"
];
  1. ملاحظات مهمة عند إنشاء المصفوفة:
  • الفاصلة بين العناصر:
    تأكد من وضع فاصلة بعد كل عنصر، باستثناء العنصر الأخير.
  • استخدام المسافات:
    قد ترغب في تنسيق المصفوفة لتكون مرتبة لسهولة القراءة.

الوصول إلى عناصر المصفوفة (Accessing Array Elements)

بعد إنشاء المصفوفة التي تحتوي على قائمة بأنواع الكعك الموجودة في متجرنا. كل نوع من الكعك في المصفوفة يُعرف بـ عنصر (Element). دعونا نتعرف أكثر على كيفية الوصول إلى العناصر داخل المصفوفة باستخدام الفهرس الخاص بكل عنصر.

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

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

ملحوظة: مصطلح “عنصر” يُستخدم أيضًا عند الحديث عن عناصرHTML، ولكن هنا نحن نتحدث عن العناصر داخل المصفوفات في JavaScript.

الوصول إلى العناصر باستخدام الفهرس (Index)

كل عنصر داخل المصفوفة لديه فهرس (Index) يشير إلى موقعه. يبدأ الفهرس في المصفوفات من 0 وليس من 1.
للوصول إلى عنصر معين في المصفوفة، نستخدم صيغة بسيطة:

اسم_المصفوفة[الفهرس];

مثال:
لنفترض أن لدينا مصفوفة تحتوي على أنواع الكعك:

var donuts = [
  "Glazed Donuts", 
  "Chocolate Frosted Donuts", 
  "Cinnamon Donuts", 
  "Powdered Donuts", 
  "Donut Holes"
];

يمكننا الوصول إلى العناصر كما يلي:

  • للوصول إلى أول عنصر (Glazed Donuts):
console.log(donuts[0]); // Glazed Donuts
  • للوصول إلى ثاني عنصر (Chocolate Frosted Donuts):
console.log(donuts[1]); // Chocolate Frosted Donuts
  • للوصول إلى آخر عنصر (Donut Holes):
console.log(donuts[4]); // Donut Holes

لماذا تُعد المصفوفات أداة مفيدة؟

  • الوصول السريع: يمكنك الوصول إلى أي عنصر في المصفوفة مباشرة باستخدام الفهرس.
  • التنظيم: جميع البيانات تكون مجمعة في متغير واحد مما يجعل الكود أنظف وأبسط.
  • القابلية للتوسع: يمكنك بسهولة إضافة عناصر جديدة إلى المصفوفة أو تعديلها.

الفهرس في المصفوفات (Array Index)

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

بداية الفهرس في المصفوفات

في JavaScript، الفهرس يبدأ دائمًا من 0. هذا يعني أن:

  • أول عنصر في المصفوفة يكون عند الفهرس 0.
  • ثاني عنصر عند الفهرس 1.
  • وهكذا حتى آخر عنصر.

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

للوصول إلى عنصر معين داخل المصفوفة، يمكنك استخدام صيغة بسيطة:

اسم_المصفوفة[الفهرس];

مثال عملي:
لنفترض أن لدينا مصفوفة تحتوي على أسماء الفواكه:

var fruits = ["Apple", "Banana", "Orange", "Mango"];
  • للوصول إلى أول عنصر:
console.log(fruits[0]); // Apple
  • للوصول إلى العنصر الثالث:
console.log(fruits[2]); // Orange
  • للوصول إلى آخر عنصر في المصفوفة:
console.log(fruits[3]); // Mango

خصائص الفهرس في المصفوفات

  1. ترقيم متسلسل: الفهرس يكون دائمًا أرقامًا متسلسلة تبدأ من 0.
  2. يمثل ترتيب العنصر: الرقم يمثل ترتيب العنصر في المصفوفة.
  3. قابل للتكرار في الحلقات: يمكن استخدام الفهرس في الحلقات للوصول إلى جميع عناصر المصفوفة.

مثال باستخدام حلقة:

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

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

النتيجة:

Apple  
Banana  
Orange  
Mango

الوصول إلى العناصر خارج النطاق (Out of Range Index)

إذا حاولت الوصول إلى فهرس غير موجود في المصفوفة (مثل فهرس أكبر من عدد عناصرها)، فستحصل على القيمة undefined.

مثال:

var fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[5]); // undefined

تعديل العناصر باستخدام الفهرس

يمكنك استخدام الفهرس لتغيير قيمة عنصر معين داخل المصفوفة:

var fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Blueberry"; // تغيير Banana إلى Blueberry
console.log(fruits); // ["Apple", "Blueberry", "Orange"]

خاصية الطول (Array Length)

إذا أردت معرفة عدد العناصر داخل المصفوفة، يمكنك استخدام خاصية .length.

var fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length); // 3

ملاحظة:

  • آخر عنصر في المصفوفة يكون دائمًا عند الفهرس: طول المصفوفة - 1.
var fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[fruits.length - 1]); // Orange

أهمية الفهرس في المصفوفات

  • سهولة الوصول: يمكنك الوصول إلى أي عنصر بمجرد معرفة موقعه.
  • التنظيم: يجعل ترتيب البيانات داخل المصفوفة واضحًا ومنهجيًا.
  • التكرار: باستخدام الحلقات، يمكنك المرور على جميع العناصر بسهولة.

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

خصائص المصفوفات (Array Properties) وطرقها (Array Methods) في JavaScript

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

خاصية length

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

مثال:

var fruits = ["Apple", "Banana", "Orange", "Mango"];
console.log(fruits.length); // 4
  • في الحلقات:
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

طرق شائعة للمصفوفات (Array Methods)

Method push

تُستخدم لإضافة عنصر جديد إلى نهاية المصفوفة.

var fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Orange"]
Method pop

تُستخدم لإزالة آخر عنصر من المصفوفة وإرجاعه.

var fruits = ["Apple", "Banana", "Orange"];
var lastFruit = fruits.pop();
console.log(fruits); // ["Apple", "Banana"]
console.log(lastFruit); // Orange
Method shift

تُستخدم لإزالة أول عنصر من المصفوفة وإرجاعه.

var fruits = ["Apple", "Banana", "Orange"];
var firstFruit = fruits.shift();
console.log(fruits); // ["Banana", "Orange"]
console.log(firstFruit); // Apple
Method unshift

تُستخدم لإضافة عنصر جديد إلى بداية المصفوفة.

var fruits = ["Banana", "Orange"];
fruits.unshift("Apple");
console.log(fruits); // ["Apple", "Banana", "Orange"]
Method reverse

تُستخدم لعكس ترتيب العناصر في المصفوفة.

var fruits = ["Apple", "Banana", "Orange"];
fruits.reverse();
console.log(fruits); // ["Orange", "Banana", "Apple"]
Method sort

تُستخدم لترتيب العناصر في المصفوفة.
- للترتيب الافتراضي (أبجديًا):

var fruits = ["Banana", "Apple", "Orange"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Orange"]
  • للترتيب حسب القيم الرقمية:
var numbers = [40, 10, 20, 30];
numbers.sort(function(a, b) {
  return a - b; // ترتيب تصاعدي
});
console.log(numbers); // [10, 20, 30, 40]
Method splice

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

  • لإضافة عناصر:
var fruits = ["Apple", "Banana", "Orange"];
fruits.splice(1, 0, "Mango"); // إضافة Mango عند الفهرس 1
console.log(fruits); // ["Apple", "Mango", "Banana", "Orange"]
  • لحذف عناصر:
var fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.splice(1, 1); // حذف العنصر عند الفهرس 1
console.log(fruits); // ["Apple", "Banana", "Orange"]
Method slice

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

var fruits = ["Apple", "Banana", "Orange", "Mango"];
var slicedFruits = fruits.slice(1, 3); // استخراج من الفهرس 1 إلى 3 (غير شامل)
console.log(slicedFruits); // ["Banana", "Orange"]
Method concat

تُستخدم لدمج مصفوفتين أو أكثر.

var fruits = ["Apple", "Banana"];
var moreFruits = ["Orange", "Mango"];
var allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["Apple", "Banana", "Orange", "Mango"]

خصائص وطرق متقدمة للمصفوفات

  • في JavaScript، المصفوفات هي نوع خاص من الكائنات (Objects).
  • هذا يعني أنه يمكنك استخدام خصائص وطرق متقدمة للتعامل مع المصفوفات.

هناك طرق أكثر تعقيدًا مثل:

  • forEach() لتنفيذ وظيفة معينة مرة واحدة لكل عنصر في المصفوفة.
  • map() لتطبيق دالة على كل عنصر وإرجاع مصفوفة جديدة.
  • filter() لتصفية العناصر بناءً على شرط معين.
  • reduce() لتقليل المصفوفة إلى قيمة واحدة.
مثال على forEach:
let donuts = ["المزجج", "الشوكولاتة", "القرفة"];
donuts.forEach(function(donut) {
  console.log(`أنا أحب ${donut}`);
});
// الإخراج:
// أنا أحب المزجج
// أنا أحب الشوكولاتة
// أنا أحب القرفة
مثال على map:
var numbers = [1, 2, 3, 4];
var doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8]
مثال على filter
let ages = [12, 18, 20, 15, 25, 30];
let adults = ages.filter(function(age) {
  return age >= 18; // تصفية الأعمار التي تساوي أو تزيد عن 18
});
console.log(adults); // [18, 20, 25, 30]
  • يقوم filter بتصفية العناصر التي تحقق شرطًا معينًا (العمر >= 18 في هذا المثال).
  • النتيجة هي مصفوفة جديدة تحتوي فقط على العناصر التي تحقق الشرط.
مثال على reduce
let prices = [10, 20, 30, 40];
let total = prices.reduce(function(accumulator, currentPrice) {
  return accumulator + currentPrice; // جمع كل الأسعار
}, 0); // القيمة الابتدائية للمجموع هي 0
console.log(total); // 100
  • reduce يُستخدم لتقليص المصفوفة إلى قيمة واحدة (مجموع العناصر هنا).
  • accumulator هو المتغير الذي يحتفظ بالقيمة المُجمعة.
  • currentPrice هو العنصر الحالي الذي يتم معالجته.

مصفوفة الدونات ثنائية الأبعاد (2D Donut Array)

المصفوفة ثنائية الأبعاد تُستخدم لتنظيم البيانات على شكل جدول، حيث يحتوي كل صف على مجموعة من العناصر.

مثال:

let donutArray = [
  ["النوع", "السعر"],
  ["المزجج", 5],
  ["الشوكولاتة", 6],
  ["القرفة", 4]
];

console.log(donutArray[2][1]); // 6 (سعر الدونات الشوكولاتة)

هذه الطرق والمفاهيم تجعل التعامل مع المصفوفات في الجافاسكريبت أكثر سهولة وفعالية، مما يساعدك على تنظيم البيانات وإدارتها بشكل أفضل.

مقدمة إلى الكائنات (Objects) في JavaScript

في JavaScript، الكائنات (Objects) هي إحدى الطرق الأساسية لتنظيم البيانات.
الكائنات تُستخدم لتخزين مجموعات من البيانات أو السمات المرتبطة بها. عوضًا عن تخزين البيانات كقيم فردية، الكائنات تسمح بتخزينها في شكل مفتاح (Key) وقيمة (Value).

تعلم الكائنات هو خطوة أساسية لفهم JavaScript بشكل أعمق والعمل مع البرمجة الكائنية (OOP).

الكائنات في البرمجة (Objects in Code)

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

مفهوم الكائنات (Objects)

تعريف الكائن:

الكائن هو بنية بيانات تحتوي على مجموعة من الخصائص (Properties)، كل خاصية تتكون من: - مفتاح (Key): اسم الخاصية. - قيمة (Value): القيمة المرتبطة بهذا المفتاح.

صيغة الكائن:

let objectName = {
  key1: value1,
  key2: value2,
  key3: value3
};

مثال:

let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2024,
  isElectric: false
};
console.log(car);
// الإخراج: { brand: 'Toyota', model: 'Camry', year: 2024, isElectric: false }

تسمية المفاتيح (Naming Conventions)

عند تسمية المفاتيح في الكائنات، هناك بعض القواعد والممارسات الجيدة التي يجب اتباعها:

القواعد:

  • يمكن أن تكون أسماء المفاتيح نصوصًا (Strings) أو رموزًا (Symbols).
  • إذا كانت أسماء المفاتيح تحتوي على مسافات أو تبدأ بأرقام، يجب وضعها بين علامات اقتباس.
let user = {
  "first name": "John", // يحتوي على مسافة
  "1stPlace": "Gold"    // يبدأ برقم
};

الممارسات الجيدة:

  • استخدم أسماء وصفية ومعبرة عن الغرض:
let user = { age: 25, name: "Alice" }; // جيد
  • استخدم الصيغة camelCase عند تسمية المفاتيح:
let book = { numberOfPages: 350, isAvailable: true };
  • تجنب استخدام الكلمات المحجوزة في JavaScript مثل class أو return.

الوصول إلى خصائص الكائن

باستخدام Dot Notation:

console.log(car.brand); // Toyota

باستخدام Bracket Notation:

console.log(car["model"]); // Camry

الكائنات والدوال (Methods)

يمكن للكائنات أن تحتوي على دوال، وتُعرف هذه الدوال باسم أساليب (Methods).

مثال:

let user = {
  name: "Mahmoud",
  greet: function() {
    return `Hello, my name is ${this.name}!`;
  }
};

console.log(user.greet());
// الإخراج: Hello, my name is Mahmoud!

كائنات متداخلة (Nested Objects)

يمكن أن يحتوي الكائن على كائنات أخرى كقيم.

مثال:

let employee = {
  name: "Mahmoud Adel",
  position: {
    title: "Software Developer",
    department: "IT"
  }
};

console.log(employee.position.title); // Software Developer

الكائنات مقابل المصفوفات

المصفوفات (Arrays):

  • تستخدم لفهرسة البيانات بالأرقام.
  • تُستخدم في القوائم المرتبة.

الكائنات (Objects):

  • تُستخدم لفهرسة البيانات بالمفاتيح.
  • تُستخدم في تخزين البيانات المعقدة أو غير المرتبة.

مثال:

let fruits = ["Apple", "Banana", "Cherry"]; // مصفوفة
let fruitDetails = { name: "Apple", color: "Red" }; // كائن

تعلّم الكائنات هو أساس قوي لفهم البرمجة الكائنية (Object-Oriented Programming) والعمل مع البيانات بشكل فعّال.

خاتمة

لقد وصلنا إلى نهاية رحلتنا مع الكائنات والمصفوفات في JavaScript. الآن أصبح لديك الفهم الكامل لكيفية استخدام هذه الهياكل البيانية لتخزين البيانات وتنظيمها بطرق مبتكرة. ولديك الأن أساس قوي إذا أردت البدأ فى مجال الفرونت إنذ أو حتى البدأ فى مجال الباك إند.

سواء كنت تعمل على مشاريع بسيطة أو تطبيقات معقدة، ستكون المصفوفات والكائنات في JavaScript دائمًا جزءًا أساسيًا من أدواتك البرمجية.

استمر في التمرن على هذه المفاهيم، ولا تتردد في استخدامها في مشاريعك المستقبلية لتحقيق أفضل النتائج. إذا أعجبك المقال، شاركه مع الآخرين ليحظوا بنفس الفائدة!

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات