ES6 - 物件

JavaScript 支援擴充套件資料型別。JavaScript 物件是定義自定義資料型別的好方法。

一個物件是一個例項，包含一組鍵值對。與原始資料型別不同，物件可以表示多個或複雜的值，並且可以在其生命週期內發生變化。這些值可以是標量值、函式，甚至是其他物件的陣列。

下面將進一步討論定義物件的語法變體。

物件初始化器

與原始型別一樣，物件也有字面量語法：花括號（{}）。以下是定義物件的語法。

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

物件的內容稱為屬性（或成員），屬性由名稱（或鍵）和值組成。屬性名稱必須是字串或符號，值可以是任何型別（包括其他物件）。

與所有 JavaScript 變數一樣，物件名稱（可以是普通變數）和屬性名稱都區分大小寫。您可以使用簡單的點表示法訪問物件的屬性。

以下是訪問物件屬性的語法。

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。該物件具有三個屬性。第三個屬性指的是一個函式。

在成功執行上述程式碼後，將顯示以下輸出。

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

使用這種簡寫語法，JS 引擎會在包含的作用域中查詢具有相同名稱的變數。如果找到，則將該變數的值賦給屬性。如果未找到，則會丟擲 ReferenceError。

Object() 建構函式

JavaScript 提供了一個名為Object()的特殊建構函式來構建物件。new 運算子用於建立物件的例項。要建立物件，new 運算子後跟構造方法。

以下是定義物件的語法。

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

注意 - 物件屬性名稱可以是任何有效的 JavaScript 字串，或任何可以轉換為字串的內容，包括空字串。但是，任何不是有效 JavaScript 識別符號的屬性名稱（例如，具有空格或連字元，或以數字開頭的屬性名稱）只能使用方括號表示法訪問。

也可以使用儲存在變數中的字串值來訪問屬性。換句話說，物件的屬性鍵可以是動態值。例如：一個變數。以下示例說明了這個概念。

示例

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 併為屬性設定預設值。建立了兩個新例項，它們覆蓋了物件的預設屬性值。

在成功執行上述程式碼後，將顯示以下輸出。

Admin 
Guest

Object.assign() 函式

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，因為 in 運算子在物件中找不到該屬性。

比較物件

在 JavaScript 中，物件是引用型別。兩個不同的物件永遠不相等，即使它們具有相同的屬性。這是因為它們指向完全不同的記憶體地址。只有共享公共引用的那些物件在比較時才會返回 true。

示例 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。因此，在比較相等性時，運算子將返回 false。

物件解構

術語解構指的是分解實體的結構。JavaScript 中的解構賦值語法使從陣列或物件中提取資料到不同的變數成為可能。以下示例說明了這一點。

示例 1

解構物件時，變數名和物件屬性名必須匹配。

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

上述程式碼的輸出將如下所示：

Prijin
7.2
7.2
student_name Prijin

示例 2

如果變數和賦值在兩個不同的步驟中，那麼解構物件語法將用()括起來，如示例({rollno} = student)所示：

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

上述程式碼的輸出將如下所示：

示例 3

以下示例顯示了使用rest 運算子進行解構以及如何解構巢狀物件。

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

上述程式碼的輸出將如下所示：

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai

列印頁面