---
# System prepended metadata

title: 陣列＆物件

---

# 陣列＆物件

==從最外層判斷是 [ 陣列 ] 或 { 物件 }==
:::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 ]
看到物件用 . 進去尋找屬性，看到陣列用中括號去取值
:::