الكائنات (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)); // 15this
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]); // undefinedObject 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));اختبر فهمك