# 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. 物件
* 陣列：當資料需要使用大量且同性質的資料
* 物件：要描述一個東西對應的特徵和行為
>寫程式永遠沒有正確解答，只有符合情境的程式邏輯
Sign in with Wallet
Connect another wallet