物件裡面可以有許多描述這個物件的資訊，例如房子這個物件裡面有許多的設施。

相較於陣列（Array）像是一輛有編號的火車，裡面依序存放貨物（值）；物件比較像詳細地描述一個東西裡面有哪些細部的資訊，而我們可以透過屬性關鍵字去查找這些資訊。

宣告物件

使用大括號 {} 來宣告物件，所有資料都要在大括號裡面去做撰寫，每一筆資料用逗號隔開

let Jack = {
    name : 'Jack',
    gender : 'male',
    height : 183,
    weight : 78,
    屬性 : 值,
}

從上面範例我們可以看到大括號裡面新增了許多的屬性 (property)，以及相對應的值 (value) 例如：gender 是其中一個屬性，其所對應的值就是男性 (male
)，這就是用來描述 Jack 這一個人的資訊。

如何讀取物件資料

物件有兩種讀取資料的方式：點記法 (Dot notation) 跟 括弧記法 (Bracket notation)

• 點記法 (Dot notation)

  用一個點 . 去找尋物件裡面的屬性，並回傳該屬性裡面的資料：

  let Jack = {
  name : 'Jack',
  gender : 'male',
  height : 183,
  weight : 78,
  }
  
  console.log(Jack.name); //Jack
  console.log(Jack.height); //183
  

  有時候不只想要讀取裡面的值，也想要把該值拿出來使用，那我們可以宣告一個變數並賦予該值進去：

  let Jack = {
  name : 'Jack',
  gender : 'male',
  height : 183,
  weight : 78,
  }
  
  let JackHeight = Jack.height;
  
  console.log(JackHeight); //183
  

• 括弧記法 (Bracket notation)

  括弧記法 (Bracket notation)則是使用中括號，裡面包屬性關鍵字的字串去讀取對應的屬性：

  let Jack = {
  name : 'Jack',
  gender : 'male',
  height : 183,
  weight : 78,
  }
  
  console.log(Jack["gender"]); //male
  console.log(Jack["weight"]); //78
  

  也可以用一個新的變數先存放使用括弧記法取出來的值，再呼叫該變數：

  let Jack = {
  name : 'Jack',
  gender : 'male',
  height : 183,
  weight : 78,
  }
  
  let JackWeight = Jack["weight"];
  
  console.log(JackWeight); //78
  

如何選擇物件讀取資料的方式

既然物件有兩種讀取資料的方式：點記法 (Dot notation) 跟 括弧記法 (Bracket notation)，那我們該怎麼判斷使用哪一種方式比較好呢？

一般來說兩種都可以，選擇自己喜歡的方式即可，但之後會碰到 JSON 格式，裡面的物件屬性可能會有數字開頭的屬性名稱，例如：

let yo = {
"001" : "hello",
"002" : "hi",
}

console.log(yo.001); //會出錯

如果用點記法來讀取會出錯，因為屬性後面接值不能是數字開頭
此時就必須要用中括號加上字串的讀取方式：

let yo = {
"001" : "hello",
"002" : "hi",
}

console.log(yo["001"]); //hello

就可以讀取到正確的值

要特別注意的是，使用括弧記法時，裡面要使用字串的形式來表達，如果沒有使用字串形式表達的話，可能會被視為變數而產生錯誤：

let yo = {
"001" : "hello",
"002" : "hi",
}

console.log(yo[001]); //undefined 以為 001 是變數，但未賦予值，所以回傳 undefined

操縱物件屬性

• 新增物件屬性

  宣告一個空的物件，可以用點記法 (Dot notation) 或括弧記法 (Bracket notation) 將想要新增的屬性與值寫入進去：

  let Jack = {};
  Jack.height = 177;
  Jack["gender"] = "male";
  
  console.log(Jack);//{height: 177, gender: 'male'}
  

• 修改既有屬性的值

  假設 Jack 要改名成 Peter，且身高長高了6公分

  let Jack = {
  name : "Jack",
  height : 177,
  };
  
  Jack["name"] = "Peter";
  Jack.height += 6;
  
  console.log(Jack);//{name: 'Peter', height: 183}
  

• 刪除物件資料

  如果今天不需要某個屬性了，想要刪掉它的話，我們可以使用 delete 這個語法：

  let Jack = {
  name : "Jack",
  height : 177,
  weight : 87,
  };
  
  delete Jack.height;
  delete Jack["weight"];
  
  console.log(Jack); //{name: 'Jack'}
  console.log(Jack.height); //undefined
  

參考資料

線上課程
MDN
圖片來源：Unsplash