Kodax

الكائنات (Objects) — JavaScript الأساسيات

الكائنات (Objects)

الكائنات هي حاويات للخصائص والدوال المرتبطة معاً.

إنشاء الكائنات

// Object Literal (الأكثر استخداماً)
const person = {
  name: "أحمد",
  age: 25,
  city: "بغداد",
  isStudent: true
};

// كائن فارغ
const empty = {};

// Object Constructor
const obj = new Object();
obj.name = "محمد";

الوصول للخصائص

const user = {
  name: "أحمد",
  age: 25,
  "full name": "أحمد محمد"
};

// Dot Notation
console.log(user.name);    // أحمد
console.log(user.age);     // 25

// Bracket Notation (للأسماء الخاصة)
console.log(user["name"]); // أحمد
console.log(user["full name"]); // أحمد محمد

// باستخدام متغير
let key = "age";
console.log(user[key]); // 25

// خاصية غير موجودة
console.log(user.email); // undefined

تعديل الكائنات

let car = {
  brand: "تويوتا",
  year: 2020
};

// إضافة خاصية
car.color = "أبيض";
car["model"] = "كامري";

// تعديل خاصية
car.year = 2021;

// حذف خاصية
delete car.color;

console.log(car);
// { brand: "تويوتا", year: 2021, model: "كامري" }

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

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  
  // اختصار (ES6)
  subtract(a, b) {
    return a - b;
  },
  
  // Arrow function
  multiply: (a, b) => a * b
};

console.log(calculator.add(5, 3));      // 8
console.log(calculator.subtract(5, 3)); // 2
console.log(calculator.multiply(5, 3)); // 15

this

const person = {
  name: "أحمد",
  age: 25,
  
  // this تشير للكائن نفسه
  introduce() {
    return `أنا ${this.name} وعمري ${this.age}`;
  },
  
  // ⚠️ Arrow function لا تعمل مع this
  wrongIntro: () => {
    return `أنا ${this.name}`; // this غير صحيح!
  }
};

console.log(person.introduce()); // أنا أحمد وعمري 25

فحص الخصائص

const user = {
  name: "أحمد",
  age: 25
};

// فحص وجود خاصية
console.log("name" in user);          // true
console.log("email" in user);         // false
console.log(user.hasOwnProperty("name")); // true

// الحصول على المفاتيح والقيم
console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["أحمد", 25]
console.log(Object.entries(user)); // [["name", "أحمد"], ["age", 25]]

Destructuring

const person = {
  name: "أحمد",
  age: 25,
  city: "بغداد"
};

// استخراج الخصائص
const { name, age } = person;
console.log(name); // أحمد
console.log(age);  // 25

// مع إعادة تسمية
const { name: userName, age: userAge } = person;

// مع قيم افتراضية
const { email = "لا يوجد" } = person;

// داخل الدوال
function greet({ name, age }) {
  console.log(`مرحباً ${name}، عمرك ${age}`);
}
greet(person);

Spread و Rest

const defaults = {
  theme: "dark",
  language: "ar"
};

const userSettings = {
  language: "en",
  fontSize: 16
};

// دمج الكائنات (Spread)
const settings = { ...defaults, ...userSettings };
console.log(settings);
// { theme: "dark", language: "en", fontSize: 16 }

// نسخ كائن
const copy = { ...defaults };

// Rest في Destructuring
const { theme, ...rest } = settings;
console.log(rest); // { language: "en", fontSize: 16 }

الكائنات المتداخلة

const company = {
  name: "شركة التقنية",
  address: {
    city: "بغداد",
    street: "شارع الرشيد"
  },
  employees: [
    { name: "أحمد", role: "مطور" },
    { name: "محمد", role: "مصمم" }
  ]
};

// الوصول للبيانات المتداخلة
console.log(company.address.city);
console.log(company.employees[0].name);

// Optional Chaining
console.log(company.address?.country); // undefined (لا خطأ)
console.log(company.departments?.[0]); // undefined

Object Methods

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// دمج
const merged = Object.assign({}, obj1, obj2);
// { a: 1, b: 3, c: 4 }

// تجميد (لا يمكن التعديل)
Object.freeze(obj1);
obj1.a = 10; // لا يحدث شيء

// منع الإضافة
Object.seal(obj2);
obj2.d = 5;  // لا يحدث شيء
obj2.b = 10; // يعمل (التعديل مسموح)

// التكرار
for (let [key, value] of Object.entries(obj1)) {
  console.log(`${key}: ${value}`);
}
// إنشاء كائن
const person = {
  name: "أحمد",
  age: 25,
  city: "بغداد",
  
  introduce() {
    return `أنا ${this.name} من ${this.city}`;
  }
};

console.log(person.introduce());

// Destructuring
const { name, age } = person;
console.log(`الاسم: ${name}, العمر: ${age}`);

// Spread - نسخ ودمج
const updated = { ...person, job: "مبرمج" };
console.log(updated);

// Object.keys/values
console.log("المفاتيح:", Object.keys(person));
console.log("القيم:", Object.values(person));
اختبر فهمك