٤.٦ أنواع البيانات المركّبة — الجزء الأول

كائن جديد

التمرين 1: ما نوع بيانات phone ؟

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

console.log(`The type is: ${typeof phone}`);

النتيجة هي: The type is: object

التمرين 2: ارجع إلى التمرين 1؛ ما الدالة البانية للكائن phone ؟

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

console.log(`The constructor is: ${phone.constructor}`);

النتيجة هي: The constructor is: function Object() { [native code] }

التمرين 3: أنشئ كائنًا فارغًا، واعرض قيمته ونوعه في وحدة التحكم.

var myObj = {};

console.log(`The value is: ${myObj}`);
console.log(`The type is: ${typeof myObj}`);

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

The value is: [object Object]
The type is: object

القوالب النصية والكائنات

لا تعرض القوالب النصية الكائن بتفاصيله. يمكنك استخدام JSON.stringify(object) لإظهار تمثيل خصائصه القابلة للتحويل إلى JSON.

ملاحظة: سنتعلّم عن JSON لاحقًا في الدورة.

التمرين 4: أنشئ كائنًا فارغًا باستخدام الباني Object مع new Object()، واعرض قيمته ونوعه. تلميح: استخدم JSON.stringify(object).

var myObj = new Object();

console.log(`The value is: ${JSON.stringify(myObj)}`);
console.log(`The type is: ${typeof myObj}`);

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

The value is: {}
The type is: object

الباني Object

العامل Object يُنشئ كائنات جديدة.

لإنشاء كائن جديد استخدم new متبوعةً بـObject().

التمرين 5: أنشئ كائنًا فارغًا باستخدام new Object(null).

var myObj = new Object(null);

console.log(`The object is: ${JSON.stringify(myObj)}`);

النتيجة هي: The object is: {}

التمرين 6: أنشئ كائنًا فارغًا باستخدام new Object(undefined).

var myObj = new Object(undefined);

console.log(`The object is: ${JSON.stringify(myObj)}`);

النتيجة هي: The object is: {}

معلومة

كل من new Object(), new Object(null) و new Object(undefined) يُنشئ كائنًا فارغًا جديدًا.

التمرين 7: أعد إنشاء الكائن phone التالي باستخدام الباني Object ، واعرضه في وحدة التحكم.

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

var phone = new Object();
phone.os = "Andriod";
phone.ram = "8GB";
phone.storage = "512GB";

console.log(`The object is: ${JSON.stringify(phone)}`);

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

التمرين 8: أعد إنشاء الكائن user التالي باستخدام الباني Object ، واعرضه في وحدة التحكم.

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

var user = new Object();
user.firstName = "Ali";
user.lastName = "Zaki";
user.username = "AliZaki88";
user.email = "alizaki@mail.com";

console.log(`The object is: ${JSON.stringify(user)}`);

النتيجة هي: The object is: {"firstName":"Ali","lastName":"Zaki","username":"AliZaki88","email":"alizaki@mail.com"}

التمرين 9: أعد إنشاء الكائن video التالي باستخدام الباني Object ، واعرضه في وحدة التحكم.

/*
var video = {
  length: "30min",
  host: "Nawras Ali",
};
*/

var video = new Object();
video.length = "30min";
video.host = "Nawras Ali";

console.log(`The object is: ${JSON.stringify(video)}`);

النتيجة هي: The object is: {"length":"30min","host":"Nawras Ali"}

---

instanceof

التمرين 10: ارجع إلى التمرين 7؛ هل phone نسخة من Object ؟ تلميح: استخدم phone instanceof Object?

var phone = new Object();
phone.os = "Andriod";
phone.ram = "8GB";
phone.storage = "512GB";

console.log(`Is phone an instance of Object? ${phone instanceof Object}`);

النتيجة هي: Is phone an instance of Object? true

instanceof

instanceof يفحص وجود prototype الخاص بالباني في سلسلة النماذج الأولية للكائن؛ فتكون النتيجة true عند وجوده، وإلا false.

مثلًا: myObj instanceof Object: هل myObj أُنشئ باستخدام الباني Object ؟

التمرين 11: ارجع إلى التمرين 8؛ هل user نسخة من Object ؟

var user = new Object();
user.firstName = "Ali";
user.lastName = "Zaki";
user.username = "AliZaki88";
user.email = "alizaki@mail.com";

console.log(`Is user an instance of Object? ${user instanceof Object}`);

النتيجة هي: Is user an instance of Object? true

التمرين 12: ارجع إلى التمرين 9؛ هل video نسخة من Object ؟

var video = new Object();
video.length = "30min";
video.host = "Nawras Ali";

console.log(`Is video an instance of Object? ${video instanceof Object}`);

النتيجة هي: Is video an instance of Object? true

---

المصفوفات كائنات

التمرين 13: أنشئ قائمة بالأعداد من 10 إلى 13.

var numbers = [10, 11, 12, 13];

console.log(`The value is: ${numbers}`);

النتيجة هي: The value is: 10,11,12,13

التمرين 14: ارجع إلى التمرين 13؛ ما نوع numbers ؟

var numbers = [10, 11, 12, 13];

console.log(`The type is: ${typeof numbers}`);

النتيجة هي: The type is: object

التمرين 15: ارجع إلى التمرين 13; numbers كائن، فما دالته البانية؟

var numbers = [10, 11, 12, 13];

console.log(`The constructor is: ${numbers.constructor}`);

النتيجة هي: The constructor is: function Array() { [native code] }

التمرين 16: ارجع إلى التمرين 13؛ أعد إنشاء numbers باستخدام new Array(item0, item1,..., itemN).

var numbers = new Array(10, 11, 12, 13);

console.log(`The value is: ${numbers}`);

النتيجة هي: The value is: 10,11,12,13

الباني Array

العامل Array يُنشئ كائنات مصفوفات جديدة.

لإنشاء مصفوفة باستخدام Array() ، استخدم الكلمة المفتاحية new متبوعةً بـ Array(item0, item1,..., itemN).

التمرين 17: أعد إنشاء المصفوفة التالية باستخدام Array() .

/*
var colors = ["red", "black", "green", "white"];
*/

var colors = new Array("red", "black", "green", "white");

console.log(`The value is: ${colors}`);

النتيجة هي: The value is: red,black,green,white

التمرين 18: أعد إنشاء المصفوفة التالية باستخدام Array() .

/*
var users = ["user1", "user2", "user3"];
*/

var users = new Array("user1", "user2", "user3");

console.log(`The value is: ${users}`);

النتيجة هي: The value is: user1,user2,user3

---

الدوال كائنات

التمرين 19: أنشئ دالة عادية تعرض "Hello" في وحدة التحكم.

function displayHello(){
  console.log("Hello");
}

displayHello();

النتيجة هي: Hello

التمرين 20: ارجع إلى التمرين 19؛ ما نوع displayHello?

function displayHello(){
  console.log("Hello");
}

console.log(`The type is: ${typeof displayHello}`);

النتيجة هي: The type is: function

التمرين 21: ارجع إلى التمرين 19؛ هل function نسخة من Object؟

function displayHello(){
  console.log("Hello");
}

console.log(`Is function instance of Object? ${displayHello instanceof Object}`);

النتيجة هي: Is function instance of Object? true

التمرين 22: ارجع إلى التمرين 19؛ ما displayHello ؟

function displayHello(){
  console.log("Hello");
}

console.log(`The constructor is: ${displayHello.constructor}`);

النتيجة هي: The constructor is: function Function() { [native code] }

التمرين 23: أعدنا إنشاء displayHello باستخدام Function .

var displayHello  = new Function('', 'console.log("Hello")');

displayHello();

النتيجة هي: Hello

الباني Function

العامل Function يُنشئ كائنات دوال جديدة.

لإنشاء دالة بالباني Function()، استخدم الكلمة new متبوعةً بـFunction(arg1, arg2, ..., functionBody).

التمرين 24: أعد إنشاء الدالة التالية باستخدام Function .

/*
var mul = function(num1, num2){
  return num1 * num2;
};
*/

var mul = new Function("num1", "num2", "return num1 * num2");

console.log(mul(5, 10));

النتيجة هي: 50

التمرين 25: أعد إنشاء الدالة التالية باستخدام Function .

/*
var boolValue = function(val){
  return !!val;
};
*/

var boolValue = new Function("val", "return !!val");

console.log(boolValue(undefined));

النتيجة هي: false