# 陣列＆物件
==從最外層判斷是 [ 陣列 ] 或 { 物件 }==
:::info
陣列使用時機: 當資料需要使用大量且同性質的資料
:::
:::info
物件使用時機: 要描述一個東西對應的特徵和行為
:::
## 陣列
* 開頭使用[ ]
* 適合放集合資料
* 裡面放行別資料
### 語法
```javascript=
let color1 = 'red';
let color2 = 'blue';
let color3 = 'black';
const colors = ['red', 'blue', 'black'];
console.log(colors.length);//抓取長度
//會印出3，陣列在讀取是從0開始做計算
```
### 新增陣列
> 要依據當下情境來決定是要使用unshift or push
```javascript=
const colors = ["red", "blue", "black", "pink"];
colors.unshift("white");
//呈現結果為 white, red, blue, black, pink
//將新增的資料新增到最新一筆 例如最新消息
const colors = ["red", "blue", "black"];
colors.push("pink");
//呈現結果為 red, blue, black, pink
//將新增的資料新增到最後一筆 例如排名
```
### 讀取陣列長度
```javascript=
let color1 = 'red';
let color2 = 'blue';
let color3 = 'black';
const colors = ['red', 'blue', 'black'];
console.log(colors.length);
//會印出3，陣列在讀取是從0開始做計算
```
### 刪除陣列 shift or pop
> 依據當下情境來決定是要使用 shift or pop
> 刪除第一筆資料用 shift
> 刪除最後一筆資料用 pop
```javascript=
let colors = ['red', 'blue', 'black'];
colors.shift();
console.log(colors);
//會印出['blue', 'black']
```
```javascript=
let colors = ['red', 'blue', 'black'];
colors.pop();
console.log(colors);
//會印出['red', 'blue']
```
### 刪除陣列 splice
> 第一個數字代表起始位置
> 第二數字代表要往後刪除幾筆資料
```javascript=
const colors = ['red', 'blue', 'black'];
colors.splice(1,1);
```
## 物件
* 開頭使用大括號 { }
* 講解詳細資料
### 物件屬性存取
> 物件的屬性可以透過 . (注意，是點非逗號)來進行存取：
### 語法
#### 第一種寫法
```javascript=
const personStatus = {
//屬性 值
name: 'Sara',
height: 160,
isWearJacket: false
}
console.log(personStatus.name);
//會印出Sara，會讀取personStatus的.name
```
#### 第二種寫法
```javascript=
const personStatus = {
//屬性 值
name: 'Sara',
height: 160,
isWearJacket: false
}
console.log(personStatus["name"]);
//會印出Sara，會讀取personStatus的.name
//變數使用[""]，這樣可以取變數的值
```
:::info
第二種寫法的好處為，當物件的索引鍵剛好剛好是不好法的JavaScript的識別字(如帶有空白的字串或是數字)時，執行就會出現錯誤，例如下方物件為"001"的字串
:::
```javascript=
let obj = {
"001": "Hello"
}
obj.001; //SyntaxError: Unexpected number
obj["001"]; //"Hello"
```
此時用obj.001就會發生錯誤，必須改用以obj["001"]的發誓才能正確存取。
```javascript=
let home = {
motherName: "Mary";
fatherName: "Tom";
cats: 4;
}
let motherCat = home.cats; //新增一個屬性名為motherCat，他會讀取home.cats得值，讀取到為4，因此會回傳4的值
console.log(motherCat)//4
```
### 屬性增加
若想為物件新增屬性的話，與變數一樣，直接用 = 指定就可以了：
```javascript=
const personStatus = {
//屬性 值
name: 'Sara',
height: 160,
isWearJacket: false
}
personStatus.notebook = "Mac";
//會新增一筆.notebook: "Mac" 在物件中
```
```javascript=
let home = {
motherName: "Mary";
fatherName: "Tom";
cats: 4;
}
let motherCat = home.cats; //新增一個屬性名為motherCat，他會讀取home.cats得值，讀取到為4，因此會回傳4的值
console.log(motherCat)//4
```
### 修改屬性
```javascript=
const personStatus = {
//屬性 值
name: 'Sara',
height: 160,
isWearJacket: false
}
personStatus.notebook = "Win";
//會新增一筆.notebook: "Win" 在物件中
```
### 屬性刪除
要是想刪除屬性，則是透過 delete 關鍵字來刪除：
```javascript=
const personStatus = {
//屬性 值
name: 'Sara',
height: 160,
isWearJacket: false,
notebook = "Mac"
}
delete personStatus.notebook;
//會刪除一筆.notebook: "Mac" 在物件中
```
### 物件裡面還能包物件
```javascript=
let home = {
motherStatus:{
name: "Mary",
age: 32
}
cats: 4;
}
console.log(home.motherStatus.age)//32
```
Object.keys(), Object.values() 使用練習
---
* Object.keys() 可以取得指定物件的所有 key 值，並回傳一個陣列。
* Object.values() 可以取得指定物件的所有 value 值，並回傳一個陣列。
```js=
const object1 = {
a: "字串",
b: 42,
c: false
};
console.log(Object.keys(object1)); // 結果: ["a", "b", "c"]
console.log(Object.values(object1)); // 結果: ["字串", 42, false]
```
## 取值的口決
:::success
物件用 . 陣列 [ 0 ]
看到物件用 . 進去尋找屬性，看到陣列用中括號去取值
:::
Sign in with Wallet
Connect another wallet