٤.١٧ النسخ السطحي والعميق

تمهيد

التمرين 1: اعرض أزواج مفاتيح الكائن وقيمه داخل مصفوفة.

var myFood = {
  group: "vegetables",
  name: "Leafy green"
}

console.log(Object.entries(myFood));

النتيجة كما يلي:

(2) [Array(2), Array(2)]
    0: (2) ["group", "vegetables"]
    1: (2) ["name", "Leafy green"]
    length: 2
    __proto__: Array(0)

التمرين 2: ارجع إلى التمرين 1؛ اعرض مفاتيح وقيم myFood في مصفوفة.

var myFood = {
  group: "vegetables",
  name: "Leafy green"
}

console.log(Object.keys(myFood));
console.log(Object.values(myFood));

النتيجة كما يلي:

(2) ["group", "name"]
(2) ["vegetables", "Leafy green"]

التمرين 3: اعرض أزواج المفاتيح والقيم في مصفوفة، ثم المفاتيح وحدها والقيم وحدها في مصفوفتين منفصلتين.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(Object.entries(user));
console.log(Object.keys(user));
console.log(Object.values(user));

النتيجة كما يلي:

(4) [Array(2), Array(2), Array(2), Array(2)]
(4) ["firstName", "lastName", "username", "email"]
(4) ["Ali", "Zaki", "AliZaki88", "alizaki@mail.com"]

التمرين 4: اعرض مصفوفة مفاتيح الكائن التالي.

var book = {
  weight: 0.5,
  pages: 500
};

console.log(Object.keys(book));

النتيجة هي: (2) ["weight", "pages"]

التمرين 5: اعرض مصفوفة قيم الكائن التالي.

var video = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(Object.values(video));

النتيجة هي: (5) ["30min", "Nawras Ali", "Education", "Create a WordPress Theme", "Arabic"]

التمرين 6: اعرض أزواج مفاتيح الكائن وقيمه داخل مصفوفة.

var phone = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

console.log(Object.entries(phone));

النتيجة كما يلي:

(3) [Array(2), Array(2), Array(2)]
    0: (2) ["os", "Andriod"]
    1: (2) ["ram", "8GB"]
    2: (2) ["storage", "512GB"]
    length: 3
    __proto__: Array(0)

---

المراجع والنسخ السطحي

التمرين 7: جرّب نسخ الكائن التالي.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = obj1;

console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2} {a: 1, b: 2}

التمرين 8: ارجع إلى التمرين 7؛ أضف c:3 زوجًا من مفتاح وقيمة إلى obj2، واطبع قيمة obj1 و obj2 في وحدة التحكم.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = obj1;
obj2.c = 3;

console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2, c: 3} {a: 1, b: 2, c: 3}

ملاحظة

obj1 و obj2 اسمان يشيران إلى الكائن نفسه. عند التعديل عبر أي من obj1 أو obj2فأنت تتعامل مع الكائن نفسه الذي يشير إليه obj1 و obj2 .

التمرين 9: جرّب نسخ المصفوفة التالية.

var arr1 = [1, 2, 3];

var arr2 = arr1;

console.log(arr1, arr2);

النتيجة هي: (3) [1, 2, 3] (3) [1, 2, 3]

التمرين 10: ارجع إلى التمرين 9؛ أضف 4 على arr1، واطبع arr1 و arr2 في وحدة التحكم.

var arr1 = [1, 2, 3];

var arr2 = arr1;
arr1.push(4);

console.log(arr1, arr2);

النتيجة هي: (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

نسخ المرجع والنسخ السطحي

الإسناد المباشر لا ينسخ الكائن، بل ينسخ مرجعه. أما النسخ السطحي فيُنشئ كائنًا جديدًا، مع بقاء الكائنات المتداخلة مشتركة بالمراجع.

---

النسخ السطحي والعميق

عامل النشر (Spread)

التمرين 11: أنشئ نسخة من المصفوفة التالية باستخدام عامل النشر.

var arr1 = [1, 2, 3];

var arr2 = [...arr1];

console.log(arr1, arr2);

النتيجة هي: (3) [1, 2, 3] (3) [1, 2, 3]

التمرين 12: ارجع إلى التمرين 11؛ أضف 4 على arr1، واطبع arr1 و arr2 في وحدة التحكم.

var arr1 = [1, 2, 3];

var arr2 = [...arr1];
arr1.push(4);

console.log(arr1, arr2);

النتيجة هي: (4) [1, 2, 3, 4] (4) [1, 2, 3]

التمرين 13: أنشئ نسخة من الكائن التالي باستخدام عامل النشر.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {...obj1};

console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2} {a: 1, b: 2}

التمرين 14: ارجع إلى التمرين 13؛ أضف c:3 زوجًا من مفتاح وقيمة إلى obj2، واطبع قيمة obj1 و obj2 في وحدة التحكم.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {...obj1};
obj2.c = 3;

console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2} {a: 1, b: 2, c: 3}

النسخ السطحي والعميق

النسخ العميق ينسخ الكائنات المتداخلة أيضًا، بحيث لا تشترك النسخة معها في المراجع. انتبه: عامل النشر وObject.assign في الأمثلة هنا يصنعان نسخًا سطحية، لا عميقة.

---

Object.assign()

التمرين 15: أنشئ نسخة من obj1. تلميح: استخدم Object.assign(obj2, obj1).

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {};

Object.assign(obj2, obj1);
console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2} {a: 1, b: 2}

التمرين 16: ارجع إلى التمرين 15؛ أضف c:3 زوجًا من مفتاح وقيمة إلى obj1، واطبع قيمة obj1 و obj2 في وحدة التحكم.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {};
Object.assign(obj2, obj1);
obj1.c = 3;

console.log(obj1, obj2);

النتيجة هي: {a: 1, b: 2, c: 3} {a: 1, b: 2}

Object.assign()

Object.assign(copy, original) تنسخ الخصائص الخاصة القابلة للتعداد إلى الكائن الهدف وتُرجعه. النسخ هنا سطحي.

التمرين 17: أنشئ نسخة من الكائن التالي باستخدام Object.assign().

var obj = {
  firstName: "Ali",
  lastName: "Zaki"
};

var copy = Object.assign({}, obj);
console.log(copy);

النتيجة هي: {firstName: "Ali", lastName: "Zaki"}

التمرين 18 ارجع إلى التمرين 17؛ أضف groupId:5 زوجًا من مفتاح وقيمة إلى copy. اطبع كلًا من Obj و copy في وحدة التحكم.

var obj = {
  firstName: "Ali",
  lastName: "Zaki"
};

var copy = Object.assign({}, obj);
copy.groupId = 5;

console.log(obj, copy);

النتيجة هي: {firstName: "Ali", lastName: "Zaki"} {firstName: "Ali", lastName: "Zaki", groupId: 5}

التمرين 19: أنشئ نسخة من الكائن التالي باستخدام Object.assign().

var obj = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

var copy = Object.assign({}, obj);

console.log(copy);

النتيجة هي: {os: "Andriod", ram: "8GB", storage: "512GB"}

التمرين 20: أضف خصائص obj2 على obj1 باستخدام Object.assign().

var obj1 = {
  a: 1,
  b: 2,
  c: 3
};

var obj2 = {
  d: 4,
  e: 5
};


Object.assign(obj1, obj2);

console.log(obj1);

النتيجة هي: {a: 1, b: 2, c: 3, d: 4, e: 5}

التمرين 21: أضف خصائص obj2 على obj1 باستخدام Object.assign().

var obj1 = {
  prop1: "val1",
  prop2: "val2",
};

var obj2 = {
  prop3: "val3",

};

Object.assign(obj1, obj2);

console.log(obj1);

النتيجة هي: {prop1: "val1", prop2: "val2", prop3: "val3"}

التمرين 22: أضف خصائص obj2, obj3، و obj4 على obj1 باستخدام Object.assign().

var obj1 = {
  a: 1
};
var obj2 = {
  b: 2,
  c: 3
};
var obj3 = {
  d: 4,
  e: 5,
  f: 6
};
var obj4 = {
  g: 7,
  h: 8,
  i: 9,
  j: 10
};

Object.assign(obj1, obj2, obj3, obj4);

console.log(obj1);

النتيجة هي: {a: 1, b: 2, c: 3, d: 4, e: 5, …}

التمرين 23: أضف خصائص obj2 و obj3 على obj1 باستخدام Object.assign().

var obj1 = {
  prop1: "val1"
};
var obj2 = {
  prop2: "val2",
  prop3: "val3"
};
var obj3 = {
  prop4: "val4",
  prop5: "val5",
  prop6: "val6"
};

Object.assign(obj1, obj2, obj3);

console.log(obj1);

النتيجة هي: {prop1: "val1", prop2: "val2", prop3: "val3", prop4: "val4", prop5: "val5", …}