---
# System prepended metadata

title: '何謂物件取值？在什麼時機上會用到？點(.)和方括號([])取值的不同之處'

---

# 何謂物件取值？在什麼時機上會用到？點(.)和方括號([])取值的不同之處
物件是 JavaScript 中的基礎，可以把它想像成一個容器，裡面用我們要的"屬性"(key)當格子放置需要的資訊(value)做分類，每個格子用逗號分開。
```javascript=
let Me = {
    // key:"value",
    name:"洋蔥",
    sex:"male",
    age:27,
    skill:[HTML,CSS,JS,jQuery]
}
```
> Me容器中裝著 name , sex , age , skill的格子，裡面分別放入需要的資料
## 物件取值
物件取值的方式有兩種，
* 點語法( . )
* 中括號( [] )：

### 點語法 ( . ) 存取值
* 只能在 key 不包含符號的狀況下使用，因為 JavaScript 並不會知道後面的符號是 key 的一部分
* 在開頭為數字的狀況下也無法使用
* 無法使用變量
```javascript=
// 取
let point = {
    key:"正常",           
    "key-1":"有特殊符號",    
    "1":"數字在開頭"
}
let text = "key"
console.log(point.key)     //正常
console.log(point."key-1") //NaN
console.log(point."1")     //報錯
console.log(point.text)    //undefined

// 存
point.english = "abc";  //新增新的項目
```


### 中括號[] 存取值
* 可接受 key 中有符號
* 可以接受變數，會將變數中的值自動轉換成 string 再去讀取

```javascript=
// 取
let brackets = {
    key:"正常",           
    "key-1":"有特殊符號",    
    "1":"數字在開頭"
}
let text = "key"
console.log(brackets["key"])     //正常
console.log(brackets["key-1"])   //有特殊符號
console.log(brackets[1])         //數字在開頭
console.log(pointbrackets[text])      //正常

// 存
brackets["Chinese"] = "中文"
```

## 參考資料

[JavaScript 的陣列 (Array) 與物件 (Object)](https://w3c.hexschool.com/blog/f8bbfdeb)
[JavaScript 核心篇 學習筆記: Chap.30 — 物件取值，新增與刪除](https://medium.com/@yining1204/javascript-%E6%A0%B8%E5%BF%83%E7%AF%87-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-chap-30-%E7%89%A9%E4%BB%B6%E5%8F%96%E5%80%BC-%E6%96%B0%E5%A2%9E%E8%88%87%E5%88%AA%E9%99%A4-b7a3a37a6bd7)