الوحدة 5: الكائنات (Objects) في JavaScript

ahmed nabelByahmed nabel كورس JavaScript

إليك كورس كامل عن الوحدة 5: الكائنات (Objects) في JavaScript، التي تشرح مفهوم الكائنات وكيفية العمل معها. سنغطي المفاهيم الأساسية بشكل مفصل مع الأمثلة والتمارين العملية.

الوحدة 5: الكائنات (Objects) في JavaScript

الدرس 1: مقدمة في الكائنات

  • المفهوم الأساسي: الكائنات هي نوع بيانات معقد في JavaScript تُستخدم لتخزين مجموعة من القيم المرتبطة. يمكن للكائن أن يحتوي على خصائص (properties) ودوال (methods).
1. تعريف كائن
  • الكائن هو مجموعة من الأزواج “الخاصية: القيمة”.
    javascript
    let person = {
    name: "أحمد",
    age: 25,
    greet: function() {
    console.log("مرحبًا! اسمي " + this.name);
    }
    };

    console.log(person.name); // "أحمد"
    console.log(person.age); // 25
    person.greet(); // "مرحبًا! اسمي أحمد"

2. الكائنات هي مزيج من البيانات والوظائف
  • الخصائص: هي القيم المرتبطة بالكائن.
  • الدوال: هي الأساليب المرتبطة بالكائن، ويمكن أن تعمل على الخصائص.

الدرس 2: الوصول إلى خصائص الكائن

  • المفهوم: للوصول إلى خصائص الكائن، يمكننا استخدام النقاط (dot notation) أو الاقتباسات (bracket notation).
1. استخدام النقاط
  • يمكنك الوصول إلى الخصائص مباشرة باستخدام النقاط.
    javascript
    let person = {
    name: "أحمد",
    age: 25
    };

    console.log(person.name); // "أحمد"
    console.log(person.age); // 25

2. استخدام الأقواس
  • يمكنك الوصول إلى الخصائص باستخدام الأقواس عندما يكون اسم الخاصية متغيرًا أو يحتوي على مسافات أو رموز.
    javascript
    let person = {
    name: "أحمد",
    age: 25
    };

    console.log(person["name"]); // "أحمد"
    console.log(person["age"]); // 25

الدرس 3: إضافة وتعديل خصائص الكائن

  • المفهوم: يمكنك إضافة خصائص جديدة إلى الكائن أو تعديل الخصائص الموجودة.
1. إضافة خاصية جديدة
  • يمكنك إضافة خصائص جديدة إلى الكائن بعد تعريفه.
    javascript
    let person = {
    name: "أحمد",
    age: 25
    };

    person.job = "مطور ويب"; // إضافة خاصية جديدة
    console.log(person.job); // "مطور ويب"

2. تعديل خاصية موجودة
  • لتعديل خاصية موجودة، يمكنك الوصول إليها باستخدام النقاط أو الأقواس.
    javascript
    person.age = 26; // تعديل خاصية age
    console.log(person.age); // 26

الدرس 4: حذف خصائص الكائن

  • المفهوم: يمكنك حذف خصائص الكائن باستخدام الكلمة المفتاحية delete.
javascript
let person = {
name: "أحمد",
age: 25
};

delete person.age; // حذف خاصية age
console.log(person.age); // undefined

الدرس 5: الدوال في الكائنات (Methods)

  • المفهوم: الكائنات في JavaScript يمكن أن تحتوي على دوال تُسمى طرق (Methods).
1. إضافة دالة إلى الكائن
  • يمكن إضافة دالة إلى الكائن لاستخدامها كطريقة.
    javascript
    let person = {
    name: "أحمد",
    greet: function() {
    console.log("مرحبًا! اسمي " + this.name);
    }
    };

    person.greet(); // "مرحبًا! اسمي أحمد"

2. استخدام الدوال السهمية في الكائنات
  • يمكن أيضًا استخدام الدوال السهمية كطرق داخل الكائنات.
    javascript
    let person = {
    name: "أحمد",
    greet: () => {
    console.log("مرحبًا! اسمي " + this.name);
    }
    };

    person.greet(); // ستطبع "مرحبًا! اسمي undefined" لأن `this` داخل دالة السهم يشير إلى الكائن المحيط

الدرس 6: استخدام this داخل الكائنات

  • المفهوم: الكلمة المفتاحية this داخل الكائن تشير إلى الكائن نفسه، ويمكن استخدامها للإشارة إلى الخصائص والطرق داخل الكائن.
javascript
let person = {
name: "أحمد",
greet: function() {
console.log("مرحبًا! اسمي " + this.name);
}
};

person.greet(); // "مرحبًا! اسمي أحمد"

الملاحظة:
  • إذا كنت تستخدم الدوال السهمية (arrow functions)، فإن this لن يشير إلى الكائن نفسه. لذلك، يُفضل استخدام الدوال التقليدية عندما تحتاج إلى استخدام this داخل الكائنات.

الدرس 7: الكائنات المتداخلة (Nested Objects)

  • المفهوم: يمكن للكائنات أن تحتوي على كائنات أخرى داخلها، مما يتيح لك بناء هيكل بيانات معقد.
javascript
let person = {
name: "أحمد",
address: {
city: "القاهرة",
country: "مصر"
}
};

console.log(person.address.city); // "القاهرة"

الدرس 8: التكرار عبر خصائص الكائن

  • المفهوم: يمكنك التكرار عبر خصائص الكائن باستخدام حلقة for...in.
javascript
let person = {
name: "أحمد",
age: 25,
job: "مطور ويب"
};

for (let key in person) {
console.log(key + ": " + person[key]);
}
// ستطبع:
// name: أحمد
// age: 25
// job: مطور ويب

الدرس 9: استخدام Object.keys(), Object.values(), و Object.entries()

  • المفهوم: توفر JavaScript طرقًا مدمجة للحصول على مفاتيح القيم أو القيم أو الأزواج في الكائن.
1. Object.keys(): للحصول على جميع المفاتيح.
javascript
let person = {
name: "أحمد",
age: 25
};

console.log(Object.keys(person)); // ["name", "age"]

2. Object.values(): للحصول على جميع القيم.
javascript
console.log(Object.values(person)); // ["أحمد", 25]
3. Object.entries(): للحصول على جميع الأزواج “المفتاح: القيمة”.
javascript
console.log(Object.entries(person)); // [["name", "أحمد"], ["age", 25]]

الدرس 10: تلخيص الوحدة

  • الكائنات: هي هيكل بيانات يحتوي على مجموعة من الخصائص والطرق.
  • الخصائص: هي البيانات المخزنة داخل الكائن.
  • الطرق (الدوال): هي الوظائف المرتبطة بالكائن.
  • الوصول إلى الخصائص: يمكنك الوصول إلى خصائص الكائن باستخدام النقاط أو الأقواس.
  • التعديل والإضافة: يمكنك تعديل أو إضافة خصائص جديدة للكائن.
  • الدوال المتداخلة: يمكن للكائنات أن تحتوي على كائنات أخرى أو وظائف متداخلة.
  • التكرار عبر الكائنات: يمكن استخدام for...in للتكرار عبر خصائص الكائن.

المشاريع العملية للوحدة 5:

  • مشروع 1: بناء كائن يمثل طالب يحتوي على خصائص مثل name, age, grade ودالة تحسب معدله الدراسي.
  • مشروع 2: بناء كائن book يحتوي على خصائص مثل title, author, year, ودالة تطبع معلومات الكتاب.
  • مشروع 3: كتابة برنامج يستخدم كائنات متداخلة لتمثيل منتج في متجر يحتوي على خصائص مثل name, price, و manufacturer.

 

    ahmed nabel

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *