---
# System prepended metadata

title: JavaScript - 陣列 vs. 物件
tags: [object, array, javascript]

---

# JavaScript - 陣列 vs. 物件
###### tags: `javascript` `array` `object`

## 陣列 []
### 陣列寫法
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];
```

### 陣列不只能放字串，也能放數字與混合資料
```javascript=
// 空陣列
let data = [];
console.log(data);

// 數字資料
let books = [5, 30, 400, 100];
console.log(books);

// 混合資料
let ary = ['blue', 5, false];
console.log(ary);
```

### 陣列「讀取」教學
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];

colors[0]
>'blue'

colors[1]
>'red'

colors[2]
>'black'

console.log(colors[0])
>blue

console.log(colors[1])
>red
```

### 「讀取」陣列資料，並「賦予」新變數流程
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];

let zoeFavoriteColor = colors[1];

console.log(zoeFavoriteColor);
>red
```

### .length 讀取陣列長度
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];

console.log(colors.length);
>3

// 想將顏色數量儲存起來
// 宣告變數並賦予
let colorsNum = colors.length;

colorsNum
>3
```

### 【小技巧】取得最後一筆
```javascript=
let colors = ["yellow","red","blue"];

// 查陣列長度(陣列中有幾筆資料)
console.log(colors.length);
>3

// 取最後一筆資料的技巧
console.log(colors[colors.length-1]);
// colors[colors.length-1] == colors[2]

```


### 陣列「寫入」資料
#### 賦予 = 寫入資料
```javascript=
let colors = [];

colors[0] = "blue";
colors[1] = "red";
colors[2] = "black";
colors[4] = "pink";

console.log(colors);
>(5)['blue', 'red', 'black', empty, 'pink']

// 雖然這邊是空值，但它還是會視同這陣列有5筆資料
// color[3]這個位置，為 undefined 代表是有宣告卻沒有值，也就是說記憶體已經先保留好這個位置了，只是還沒有賦值上去而已
```
#### .push() 新增資料放在「最後一筆」
* 建議使用時機：排名/搶頭香
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];

colors.push('pink');

console.log(colors);
>(4)['blue', 'red', 'black', 'pink']

colors.push('yellow');
colors.push(3);

console.log(colors);
>(6)['blue', 'red', 'black', 'pink', 'yellow', 3]
```

#### .unshift() 新增資料放在「第一筆」
* 建議使用時機：最新消息
```javascript=
// 顏色盤
let colors = ['blue', 'red', 'black'];

colors.unshift('pink');

console.log(colors);
>(4)['pink', 'blue', 'red', 'black']

colors.unshift('yellow');

console.log(colors);
>(5)['yellow', 'pink', 'blue', 'red', 'black']
```

### 陣列「刪除」資料
#### .pop() 刪除「最後一筆」資料
```javascript=
// 顏色盤
let colors = ['yellow', 'pink', 'blue', 'red', 'black'];

// 刪掉最後一筆資料
colors.pop();

console.log(colors);
>(4)['yellow', 'pink', 'blue', 'red']
```

#### .shift() 刪除「第一筆」資料
```javascript=
// 顏色盤
let colors = ['yellow', 'pink', 'blue', 'red'];

// 刪掉第一筆資料
colors.shift();

console.log(colors);
>(3)['pink', 'blue', 'red']
```

#### .splice() 刪除「指定」資料
>第一個數字，起始位置
>第二個數字，要往後刪除幾筆資料
* .splice() 很常使用在網頁介面的互動上，讓使用者可以與資料產生互動。
```javascript=
// 顏色盤
let colors = ['yellow', 'pink', 'blue', 'red', 'black'];

// 刪掉最後一筆資料
colors.splice(4,1);

console.log(colors);
>(4)['yellow', 'pink', 'blue', 'red']

colors.splice(0,2);

console.log(colors);
>(2)['blue', 'red']
```

## 物件 {}
* 描述一個東西包含哪些細部資訊。
* {屬性: 值,}

### 物件寫法
```javascript=
// 描述家庭
let motherName: 'mary';
let fatherName: 'Tom';
let dogs: 3;

// 物件寫法
let home = {

//       屬性:   值,
    motherName: 'mary',
    fatherName: 'Tom',
    dogs: 3,
    isWakeUp: false
};
```

### 如何「讀取」物件的值
```javascript=
// 物件名稱.屬性 取出值
console.log(home.motherName);
>mary

// 賦予變數以運用物件內容
let tomDogs = home.dogs;
console.log(tomDogs);
>3
```

### 「新增」物件屬性
```javascript=
// 清空物件
home = {};
console.log(home);
>{}

// 為物件以.命名屬性並「賦予」值
home.motherName = "mary";
home.sons = 1;
home.isWakeUp = true;
console.log(home);
>{motherName: 'mary', sons: 1, isWakeUp: true}
```

### 「修改」物件值
```javascript=
console.log(home);
>{motherName: 'mary', sons: 1, isWakeUp: true}

// 重新賦予 -> 覆寫值
home.motherName = "jane";
home.sons += 1;
console.log(home);
>{motherName: 'jane', sons: 2, isWakeUp: true}
```

### 「刪除」物件資料
```javascript=
let home = {
fatherName: 'tom',
matherName: 'mary',
sons: 1,
dogs: 3,
isWakeUp: true
};

// 使用 delete 執行刪除指定資料
delete home.dogs;
delete home.isWakeUp;
console.log(home);
>{fatherName: 'tom', matherName: 'mary', sons: 1}

// 刪除資料後，查詢該屬性顯示 undefined
console.log(home.dogs);
>undefined
```

### 另一種「讀取」物件屬性的方法
```javascript=
let home = {
fatherName: 'tom',
matherName: 'mary',
sons: 1,
dogs: 3,
isWakeUp: true
};

// 第一種讀取方法
console.log(home.motherName);
>mary

// 第二種讀取方法
console.log(home['motherName']);
>mary
```
* 物件讀取資料判斷時間
* 資料格式較特殊時，例如：JSON 格式

```javascript=
let home = {
fatherName: 'tom',
matherName: 'mary',
sons: 1,
dogs: 3,
isWakeUp: true,
"001": "hello"; // JSON 格式
};

// 第一種讀取方法
console.log(home.001);
>讀取出錯 Uncaught SyntaxError

// 第二種讀取方法：字串模式讀取
console.log(home['001']);
>hello
```

## 【week3-2021/10/22直播講解】
### 物件-造訪資料
```javascript=
// 物件
// 造訪資料
let personal = {
//屬性 值(value)
 name:"廖洧杰",
 price:3000,
 height:179,
 weight:68
}

console.log(personal.name);
console.log(personal.weight);

// 新增一筆電腦型號
personal.pc = "Mac M1 MAX 16吋 16Ram 4TB";

console.log(personal);
>{name: '廖洧杰', price: 3000, height: 179, weight: 68, pc: 'Mac M1 MAX 16吋 16Ram 4TB'}

// 描述老師的錢包原有3000元，購買了一個3000元的玩具
personal.price -= 3000;
// personal.price = personal.price - 3000;
// 錢包歸零
```

### 【一輩子的困擾】物件取值方法

```javascript=
let obj = {
 myName:"洧杰",
 price: 3000,
 0:"2000"
}

// 物件有兩種取值方式
//  1          2
// obj.myName == obj['myName']
// obj['myName']時機：是不允許讀取狀態


// 特殊字元取值會出錯
obj.0
>Uncaught SyntaxError: Unexpected number

obj['0']
>'2000'
```

### 物件取值技巧說明
```javascript=
// 宣告變數obj為一物件
let obj = {
 myName:"洧杰",
 price: 3000,
 0:"2000"
}

// 宣告變數
// 變數thatName = 字串myName
let thatName = "myName";

console.log(thatName);
>"myName"

console.log(obj.thatName);
>undefined
// 讀取變數不可用.
// 物件obj裡面沒有一個屬性為thatName
// 因此讀取結果為undefined

// 讀取物件中的屬性-方法一.
console.log(obj.myName);
>洧杰

// 讀取變數
console.log(obj[thatName]);
>洧杰

// 讀取物件中的屬性-方法二[""]
console.log(obj["myName"]);
>洧杰
```

### 【使用時機】陣列 vs. 物件
* 陣列：當資料需要使用大量且同性質的資料
* 物件：要描述一個東西對應的特徵和行為

>寫程式永遠沒有正確解答，只有符合情境的程式邏輯
