Object Properties

- Properties هي القيم التي يتم اضافتها الي ال Object

- اي object يتكون من مجموعة من ال properties وتكون في شكل مرتب او غير مرتب لان المسافات الفارغة يتم تجاهلها

-Properties يمكن تغيير قيمتها او حزفها او اضافتها الي ال object بشكل طبيعي لكن هناك بعض ال properties لا يمكن تغيير قمتها

Accessing JavaScript Properties

Syntax

يمكننا الوصول الي Properties عن طريق عدة طرق كالأتي

HTML

objectName.property      // person.age

Example

HTML

person.firstname + " is " + person.age + " years old.";

جرّب بنفسك

Syntax

HTML

objectName["property"]   // person["age"]

Example

HTML

person["firstname"] + " is " + person["age"] + " years old.";

جرّب بنفسك

HTML

objectName[expression]   // x = "age"; person[x]

JavaScript for...in Loop

يمكننا استخدام الدالة التكرارية " for in " لنستخدمها في المرور علي جميع عناصر الخاصة بال Object لتنفذ امر معين دون الحاجة الي تنفيذه علي كل عنصر منفردا

ففي المثال التالي قمنا بأنشاء متغير " text " فارغ لا يحتوي علي اي قيمة

وقمنا بعد ذلك بأنشاء حلقة تكرارية باستخدام for in تقوم بالمرور علي كل حرف من احرف المتغيرات التالية (fname , lname , age ) ثم بعد ذلك تقوم بوضع هذه الاحرف بداخل المتغير التالي " txt "

Syntax

HTML

for (let variable in object) {
  // code to be executed
}

Example

HTML

const person = {
  fname:"Mohamed",
  lname:"saleh",
  age:25
};

جرّب بنفسك

Adding New Properties

يمكننا اضافة property جديدة الي object موجود بالفعل عن طريق

كتابة اسم ال Object + " . " + القيمة الخاصة بالعنصر الذي قمت بأضافته الي هذا ال object

- في المثال التالي نقوم بأضافة خاصية property تسمي "nationality " الي العنصر " person " وقمنا بتعيين قيمتها تساوي "English"

Example

HTML

person.nationality = "English";

جرّب بنفسك

Deleting Properties

يمكننا حذف property معينة من object معين عن طريق استخدام الكلمة delete ثم اسم ال object ثم اسم ال property ويجب ان يفصل بينهم بنقطة كما في المثال التالي

HTML

const person = {
  firstName: "ahmed",
  lastName: "Essa",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

جرّب بنفسك

ويمكننا ايضا حذف property بهذا الشكل

HTML

const person = {
  firstName: "ahmed",
  lastName: "Essa",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

جرّب بنفسك

Nested Objects

يمكن ان يكون احد عناصر object معين هو عبارة عن object وهو ما يسمي بال Nested Object

HTML

myObj = {
  name:"ahmed",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

يمكنك الوصول الي ال object عن طريق استخدام علامة النقطة " . "

HTML

myObj.cars.car2;

جرّب بنفسك

يمكنك الوصول الي ال object عن طريق استخدام الاقواس التالية " [ ] "

HTML

myObj.cars["car2"];

جرّب بنفسك

Example

HTML

myObj["cars"]["car2"];

جرّب بنفسك

Example

HTML

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

جرّب بنفسك

Nested Arrays and Objects

يمكن ان يكون احد عناصر ال object هو عبارة عن array واحد عناصر هذا ال array هو عبارة عن object كما في المثال التالي

HTML

const myObj = {
  name: "Mohamed",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

نستخدم ال for in loop للتمكن من الوصول الي عناصر ال array والتي هي عبارة عن array ايضا كما في المثال التالي

HTML

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

جرّب بنفسك

Property Attributes

يجب ان تحتوي جميع ال properties علي اسماء وقيم
القيمة هي عبارة عن attribute من ال attributes الخاصة بال property's
ال attributes تحدد نوع ال property ما اذا كانت يمكن التعديل عليها او لا
في JavaScript ، يمكن قراءة جميع attributes، ولكن يمكن تغيير قيمة ال attributes فقط (وفقط إذا كانت الخاصية قابلة للتعديل).

Object Properties