Table of Contents

• 為什麽要用物件？
• 物件的建造與使用
• Object Literal
  • 建立物件
  • property 與 method
    • 使用物件的內容
    • Dot notation
    • Bracket notation
• References

為什麽要用物件？

我之所以會這樣下標題，是因為我在學習Javascript的過程中，產生這樣的疑惑，尤其剛開始只需要賦值給變數，為什麼要把值寫成物件？

但資料量變得有點大，我們還需要為每個值創立一個變數嗎？

物件的建造與使用

object literal

建立物件

我們可以用一個{}建立一個物件：

const contestant = {
    contestantId: 1,
    contestantName: "Alice",
    hotpotFlavor: "Spicy Sichuan",
    hotpotIngredients: ["Beef slices", "Tofu", "Enoki mushrooms", "Napa cabbage"],
}

物件是一個key（鍵）對應一個value（值）的集合體，以上面的例子（範例1）來說，現在創建了一個名為contestant的物件，其中一個key是contestantId，value為1。中間需要加上:，結尾要使用,區隔。
物件想像成有一個叫contestant的櫃子，每一個抽屜都有屬於自己的名字，在抽屜裡面放入想要的內容物。
key名稱的開頭可以使用英文字、$跟_，還可以在英文字後面加上數字，或者是純數字。

Duplicate property names

如果是用重複的名稱，會發現第二個值能蓋過第一個值且不報錯，在取名時需要多加注意。

const contestant = {
  contestantId: 1,
  contestant1: 1,
  _contestant20: 1,
  $contestant: 1,
}
//以上只是範例，實際使用請參照程式的命名規則，本文不多加贅述

//使用重複的key名稱：
const contestant = {
  contestantId: 1,
  contestantId: 2
};
console.log(contestant.contestantId);//2

property與method

再回到上面的例子中，能看到contestant中有一些參賽者的資料，比如說參賽者號碼、參賽者名字、煮的火鍋風格等資料，這些在物件中被稱為property（屬性），主要是描述物件的值、狀態、特性等，可以是各種數據資料。
當我們在物件中存放函式，就會被稱作method（方法）。

我們可以修改例子，多加一段料理方法：

const contestant = {
  contestantId: 1,
  contestantName: "Alice",
  hotpotFlavor: "Spicy Sichuan",
  hotpotIngredients: ["Beef slices", "Tofu", "Enoki mushrooms", "Napa cabbage"],
  summarizeCooking: function () {
    return "Balancing spicy Sichuan flavor with tender beef, tofu, and crunchy cabbage. Pairing with fragrant jasmine tea enhances the experience.";
  },
//或可以省略"function"
  summarizeCooking() {
    return "Balancing spicy Sichuan flavor with tender beef, tofu, and crunchy cabbage. Pairing with fragrant jasmine tea enhances the experience.";
  },
};

Property definitions

值除了可以是任意型別的資料，也可以把某個值存在變數裡，再放到物件，例如：

const hotpotFlavor = "Spicy Sichuan";
const order = {
    hotpotFlavor:hotpotFlavor
}
console.log(order.hotpotFlavor);//"Spicy Sichuan"

使用物件的內容

我們可以透過Property accessors（屬性存取器）來使用物件，其中有兩種方式：

1.Dot notation

當我們想取用物件時，可以在物件名稱後面加一個.，並加上想取用的屬性或方法。

contestant.contestantId
contestant.hotpotIngredients[0]
contestant.summarizeCooking()

如果把hotpotIngredients改為物件，會是下面的形式：

const contestant = {
    //...略
  hotpotIngredients: {
      Ingredient1:"Beef slices",
      Ingredient2:"Tofu"
          //...略
  }
    //...略
};

//取用物件的格式
contestant.hotpotIngredients.Ingredient1

2.Bracket notation

在物件名稱的後面，就像存取Array元素使用一對方括號，將要存取的key包在裡面。使用括號取用key的時候，key的型別為String或Symbol，一定要加上單引號或雙引號，以防止與Array的index混淆。

這種方式提供了更大的彈性，可以存取各種不同的屬性名稱。

contestant['contestantId']
contestant['hotpotIngredients'][0]
contestant['summarizeCooking']()

//如果是物件就會是
contestant['hotpotIngredients']['Ingredient1']

//讓名稱有特殊符號
const contestant = {
  '!#$^contestantId@@%': 1,
}
contestant['!#$^contestantId@@%']

//使用`+`把名稱接起來
contestant['contestant'+'Id']

//使用字串模板
const item = 'Id';
console.log(contestant[`contestant${item}`]);//1

Object Literal的部份先到這，明天再繼續談Object Constructor

References

Objects（The JavaScript language>Objects: the basics）

• 書

1. JavaScript概念三明治：基礎觀念、語法原理一次帶走！（iT邦幫忙鐵人賽系列書）（第七章）
2. 你所不知道的JS｜範疇與Closures，this 與物件原型（8）

• MDN

1. JavaScript object basics
2. Object initializer
3. Property accessors