فصل دوازدهم: کار با آبجکت ها در اکما اسکرپیت

جاوا اسکریپت از نوع داده های توسعه یافته پشتیبانی می کند. آبجکت های جاوا اسکرپیت یک روش خوب برای تعریف این نوع داده های سفارشی هستند.

یک آبجکت نمونه ای است که شامل مجموعه ای از جفت های کلید و مقدار است.

بر خلاف نوع داده های اولیه آبجکت ها می توانند چندین مقدار یا مقادیر پیچیده را نمایش بدهند و همچنین مقادیر می توانند در طول اجرای برنامه تغییر کنند. این مقادیر می تواند شامل اسکالر (عددی), توابع، و یا حتی آرایه ای از آبجکت های دیگر باشد.

در این مقاله قصد داریم سینتکس های مختلف تعریف یک آبجکت را آموزش بدهیم.

مقدار دهی به آبجکت

مانند نوع داده های اولیه، آبجکت ها یک سینتکس مشخصی دارند که آن استفاده از آکولاد {} است .

در زیر نحوه تعریف یک آبجکت آمده است:

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

محتوای یک آبجکت پروپرتی یا اعضا نامیده می شوند، و این پروپرتی ها شامل یک نام (یا کلید) و مقدار هستند. نام پروپرتی ها باید یک رشته باشد، و مقدار پروپرتی می تواند شامل هر نوع داده ای باشد (حتی شامل آبجکت های دیگر).

همانند متغیرها در جاوا اسکریپت، نام آبجکت ها و پروپرتی هایشان به حروف بزرگ و کوچک حساس است.

شما میتوانید توسط یک نقطه (.) به پروپرتی های یک آبجکت دسترسی داشته باشید. در زیر نحوه دسترسی به پروپرتی های یک آبجکت آمده است:

objectName.propertyName

مثال- مقدار دهی به آبجکت

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

مثال بالا، یک آبجکت person را تعریف میکند. این آبجکت 3 پروپرتی دارد.

پروپرتی سوم به یک تابع اشاره می کند.

خروجی

Tom 
Hanks 
Hello!!

در ES6 در صورتی که مقدار یک پروپرتی با نام پروپرتی یکسان باشد، می توانیم از نوشتن مقدار پروپرتی صرف نظر کنیم.

مثال

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

کد بالا یک آبجکت به نام baz تعریف می کند.این آبجکت یک پروپرتی به نام foo دارد.در اینجا مقدار پروپرتی حذف شده و چون ES6  بطور ضمنی مقدار متغیر foo را به کلید foo مربوط به آبجکت ها نسبت می دهد.

در زیر، کد بالا را به سینتکس ES5 نوشتیم:

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

خروجی

bar

در سینتکس کوتاه (ES6)، موتور جاوا اسکریپت در محدوده ای (Scope) که یک متغیر با نام یکسان در آنجا قرار دارد، جستجو می کند.اگر آن را پیدا کرد مقدار متغیر به پروپرتی نسبت داده می شود و در غیراینصورت یک خطا اتفاق می افتد

سازنده Object()

جاوا اسکرپیت تابع سازنده ویژه ای به نام object() را برای ساخت یک آبجکت ارائه کرده است.

این تابع جدید یک نمونه از یک ابجکت را ایجاد می کند.

در زیر نحوه تعریف یک آبجکت نشان داده شده است:

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

در زیر نحوه دسترسی به یک پروپرتی نشان داده شده است:

Object_name.property_key                    
OR              
Object_name["property_key"]

مثال

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

خروجی

Ford 
Mustang 
1987

پروپرتی هایی که مقداری به انها نسبت داده نشده باشد، مقدار undefined را بر میگرداند .

مثال

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

خروجی

undefined

نام یک پروپرتی می تواند شامل هر رشته مجاز جاوا اسکرپیت و یا هر چیزی که بتواند به رشته تبدیل شود است.

همچنین اگر نام پروپرتی یک شناسه مجاز در جاوا اسکریپت نبود (برای مثال، نام پروپرتی شامل یک فضای خالی و یا علامت dash(-) بود) باید آن را داخل کروشه [ ] بگذارید.

همچنین می توان به پروپرتی ها با استفاده از مقدار رشته ای که در یک متغیر ذخیره شده  است، دسترسی داشت.به عبارت دیگر پروپرتی کلید یک آبجکت می تواند یک مقدار دینامیک و پویا داشته باشد،برای مثال، یک متغیر.

در زیر نحوه انجام این کار را نشان داده ایم:

مثال:

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

خروجی

Ford

تابع سازنده

یک آبججکت می تواند با استفاده از دو مرحله زیر ایجاد شود.

مرحله 1: تعریف نوع آبجکت با نوشتن یک تابع سازنده

مثال

function function_name() { 
   this.property_name = value 
}

کلمه کلیدی this به آبجکت جاری که در حال استفاه است اشاره میکند و همچنین پروپرتی آبجکت را تعریف می کند.

مرحله 2: ایجاد یک نمونه از آبجکت با کلمه کلیدی new

مثال

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

کلمه کلیدی new سازنده تابع را فراخوانی می کند و همچنین پروپرتی کلید این آبجکت را مقدار دهی اولیه میکند.

مثال- استفاده از تابع سازنده

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

در مثال بالا از یک تابع سازنده برای تعریف یک آبجکت استفاده کردید.

خروجی

Ford 
F123

یک پروپرتی جدید می تواند همیشه به آبجکت تعریف شده قبلی اضافه می شود.برای مثال:

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

خروجی

Ford 
F123

متد object.create()

شما می توانید آبجکت ها را با استفاده از متد object.create() ایجاد کنید.

این متد به شما اجازه می دهد که یک نمونه از آبجکتی که تمایل دارید، را ایجاد کنید، بدون اینکه مجبور باشید یک تابع سازنده تعریف کنید.

مثال

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

در مثال بالا یک آبجکت به نام roles ایجاد کرده ایم و برای پروپرتی های آن یک مقدار پیش فرض را قرار دادیم. دو نمونه جدید از این آبجکت را ایجاد کردیم که مقادیر پیش فرض پروپرتی های این آبجکت را override می کند.

خروجی

Admin 
Guest

تابع object.assign()

این متد تمام مقادیر پروپرتی های یک آبجکت را در یک آبجکت مورد نظر کپی می کند و آبجکت مورد نظر را بر می گرداند.

سینتکس آن به شکل زیر است:

 Object.assign(target, ...sources)

مثال- کپی کردن یک آبجکت

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

خروجی

Tom 
E1001

مثال- ترکیب آبجکت ها

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

خروجی

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

بر خلاف کپی کردن آبجکت ها، هنگامی که آبجکت ها با هم ترکیب می شوند، آبجکت بزرگتر یک کپی از پروپرتی ها را نگهداری نمی کند، بلکه یک ارجاع به پروپرتی هایی که در آبجکت اصلی قرار دارند را نگه می دارد.

مثال زیر این مفهوم را توضیح می دهد.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

خروجی

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

حذف کردن پروپرتی ها

برای حذف یک پروپرتی از عملگر delete استفاده می شود. کد زیر به شما نشان می دهد که چطور یک پروپرتی را حذف کنید.

مثال

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

خروجی 

false

کد بالا پروپرتی ها را از آبجکت حذف می کند. در مثال بالا عبارت false در خروجی چاپ شده است، چون این عملگر نمی تواند پروپرتی مشخص شده را در آبجکت پیدا کند.

مقایسه آبجکت ها

در جاوا اسکریپت آبجکت ها از نوع ارجاعی هستند. دو آبجکت حتی اگر پروپرتی های برابری هم داشته باشد، هیچگاه با هم برابر نخواهند شد.

چون آنها به دو مکان مختلف در حافظه اشاره می کنند. تنها آبجکت هایی که به یک مکان حافظه اشاره می کنند با هم برابرند.

مثال1 –آبجکت با ارجاع های مختلف

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

در مثال بالا val1 و val2 دو آبجکت مختلف هستند که به دو محل مختلف حافظه اشاره می کنند و هنگامی که این دو آبجکت را با هم مقایسه می کنیم نتیجه false می شود.

مثال2- آبجکت هایی که به یک محل حافظه اشاره می کند

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

در مثال بالا، محتوای val1 و val2 نسبت داده شده است، و این کار یعنی ارجاع پروپرتی های val1  را با val2 به اشتراک گذاشته می شود و هنگام استفاده از عملگر برابری برای مقایسه این دو آبجکت، با این که دو آبجکت در محل های مختلف حافظه قرار دارند، مقدار true را بر می گرداند.

آبجکت های غیرساختاری

واژه غیرساختاری به شکسته شدن ساختار یک موجودیت اشاره دارد. سینتکس نسبت دهی غیرساختاری در جاوا اسکریپت اجازه می دهد که داده های یک آرایه یا آبجکت را استخراج و آن را در متغیرهای مختلف قرار دهیم.

مثال زیر را ببینید:

var emp = { name: 'John', Id: 3 } 
var {name, Id} = emp 
console.log(name) 
console.log(Id)

خروجی

John 
3