الجزء الثاني عشر – الكائنات المتقدمة في JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 115 3 دقائق

🟡 1. Object.keys()

دالة Object.keys() بتقوم بإرجاع مصفوفة تحتوي على جميع المفاتيح (keys) الموجودة في الكائن.

✅ مثال

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

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

في المثال ده، Object.keys(person) إرجاع المصفوفة التي تحتوي على المفاتيح "name", "age", و "country".

🟡 2. Object.values()

دالة Object.values() بتقوم بإرجاع مصفوفة تحتوي على القيم المقابلة لكل مفتاح في الكائن.

✅ مثال

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

const values = Object.values(person);
console.log(values);  // ["Ahmed", 30, "Egypt"]

في المثال ده، Object.values(person) إرجاع المصفوفة التي تحتوي على القيم "Ahmed", 30, و "Egypt".

🟡 3. Object.entries()

دالة Object.entries() بتقوم بإرجاع مصفوفة تحتوي على أزواج المفاتيح والقيم (Key-Value pairs) الخاصة بالكائن.

✅ مثال

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

const entries = Object.entries(person);
console.log(entries);  
// [["name", "Ahmed"], ["age", 30], ["country", "Egypt"]]

في المثال ده، Object.entries(person) إرجاع مصفوفة تحتوي على أزواج المفاتيح والقيم.

🟡 4. Destructuring

الـ Destructuring هو طريقة لعمل فك (تفكيك) للكائنات أو المصفوفات بطريقة مبسطة. ده بيخليك تقدر تستخرج القيم من الكائن أو المصفوفة بشكل مباشر إلى متغيرات.

✅ Destructuring مع الكائنات

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

// Destructuring
const { name, age, country } = person;

console.log(name);    // "Ahmed"
console.log(age);     // 30
console.log(country); // "Egypt"

في المثال ده، استخدمنا Destructuring علشان نقوم بتعيين قيم المفاتيح name, age, و country إلى المتغيرات بنفس الأسماء.

✅ Destructuring مع تسمية المتغيرات:

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

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

// Destructuring مع إعادة تسمية المتغيرات
const { name: fullName, age: years, country: nation } = person;

console.log(fullName); // "Ahmed"
console.log(years);    // 30
console.log(nation);   // "Egypt"

✅ Destructuring مع المصفوفات:

const fruits = ["Apple", "Banana", "Cherry"];

// Destructuring مع المصفوفات
const [first, second, third] = fruits;

console.log(first);  // "Apple"
console.log(second); // "Banana"
console.log(third);  // "Cherry"

في المثال ده، استخدمنا Destructuring علشان نقوم بتعيين القيم الموجودة في المصفوفة إلى المتغيرات first, second, و third.

🟡 5. Spread Operator (`...`)

الـ Spread Operator بيستخدم علشان ينشر العناصر أو الخصائص من كائن أو مصفوفة داخل كائن أو مصفوفة أخرى.

✅ Spread مع المصفوفات:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2);  // [1, 2, 3, 4, 5]

في المثال ده، استخدمنا ...arr1 علشان ننقل العناصر الموجودة في arr1 إلى المصفوفة arr2.

✅ Spread مع الكائنات:

const person = {
  name: "Ahmed",
  age: 30
};

const updatedPerson = {
  ...person,
  country: "Egypt"
};

console.log(updatedPerson);  
// { name: "Ahmed", age: 30, country: "Egypt" }

في المثال ده، استخدمنا ...person علشان ننسخ كل الخصائص من الكائن person إلى الكائن updatedPerson، وأضفنا خاصية جديدة country.

🟡 6. Rest Operator (`...`)

الـ Rest Operator بيستخدم علشان يأخذ العناصر المتبقية في المصفوفة أو الكائن بعد تحديد المتغيرات الأولية.

✅ Rest مع المصفوفات

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

في المثال ده، ...rest بياخد جميع العناصر المتبقية في المصفوفة بعد تحديد first و second.

✅ Rest مع الكائنات:

const person = {
  name: "Ahmed",
  age: 30,
  country: "Egypt"
};

const { name, ...otherInfo } = person;

console.log(name);      // "Ahmed"
console.log(otherInfo); // { age: 30, country: "Egypt" }

في المثال ده، ...otherInfo بيأخذ جميع الخصائص المتبقية في الكائن بعد تحديد name.

✅ 💯 مثال كامل على الكائنات المتقدمة:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Objects in JavaScript</title>
</head>
<body>
  <script>
    // 1. Object.keys()
    const person = { name: "Ahmed", age: 30, country: "Egypt" };
    const keys = Object.keys(person);
    console.log(keys); // ["name", "age", "country"]

    // 2. Object.values()
    const values = Object.values(person);
    console.log(values); // ["Ahmed", 30, "Egypt"]

    // 3. Object.entries()
    const entries = Object.entries(person);
    console.log(entries);  // [["name", "Ahmed"], ["age", 30], ["country", "Egypt"]]

    // 4. Destructuring
    const { name, age, country } = person;
    console.log(name);    // "Ahmed"
    console.log(age);     // 30
    console.log(country); // "Egypt"

    // 5. Spread Operator
    const updatedPerson = { ...person, city: "Cairo" };
    console.log(updatedPerson);  
    // { name: "Ahmed", age: 30, country: "Egypt", city: "Cairo" }

    // 6. Rest Operator
    const { name: fullName, ...otherDetails } = person;
    console.log(fullName);    // "Ahmed"
    console.log(otherDetails); // { age: 30, country: "Egypt" }
  </script>
</body>
</html>