# JS 筆記 - ES6：解構賦值
## 陣列的解構賦值
### 基本解構賦值的概念
下方有一陣列資料：
```javascript
let numbers = [1, 2, 3, 4, 5];
let one = numbers[0];
let two = numbers[1];
let three = numbers[3];
```
通常取得陣列資料會是這樣，透過 ES6 的寫法可以變得更簡短。
首先，宣告一個空陣列等於目前的陣列資料，使其鏡射到空陣列中：
`let [] = number;`
> 雖是鏡射，但並非順序顛倒，只是將資料放入到新宣告的空陣列中。
並且把對應的變數放入空陣列中，並透過 console.log 查詢結果。
```javascript
let numbers = [1, 2, 3, 4, 5];
let [one, two, three, four, five] = numbers;
console.log(one, two, three, four, five); // 1, 2, 3, 4, 5
```
#### 當變數與資料數量不同時
若今天要跳過中間的變數取得值，可以這樣寫。
```javascript
let numbers = [1, 2, 3, 4, 5];
let [one, two, , four, five] = numbers; //跳過的變數要留下相對的位置
console.log(one, two, four, five); // 1 2 4 5
```
### 交換兩個變數的內容
傳統寫法要交換兩個變數的資料是相當複雜的，要先宣告第三個變數再進行交換，但透過解構賦值的特性，是可以同時兩個變數的資料內容。
```javascript
let one = 1;
let two = 2;
[one, two] = [two, one];
console.log(one, two); //2, 1
```
### 拆解字元到單一變數上
宣告一個變數裡面是一個字串，透過宣告陣列等於字串後，就會把字元相對拆解到對應的陣列資料中。
```javascript
let str = '我要寫程式';
let[a, b, c, d, e] = str;
console.log(a, b, c, d, e); //我 要 寫 程 式
```
按照第一個解構賦值的概念，如果把 c 移掉，就會少掉 c 的對應字元。
```javascript
let str = '我要寫程式';
let[a, b, c, d, e] = str;
console.log(a, b, d, e); //我 要 程 式
```
## 物件的解構賦值
物件的解構賦值可以透過宣告一個物件，並把資料屬性帶入，結果為物件本身，就可以取出該物件相對的值。
```javascript
let family = {
dad: '爸爸',
mom: '媽媽',
me: '我'
}
let {dad} = family;
console.log(dad); //爸爸
```
### 取出物件的一個值，並附在新的變數名稱上
延續上方範例，
```javascript
let family = {
dad: '爸爸',
mom: '媽媽',
me: '我'
}
let {dad: newDad} = family;
console.log(dad, newDad); //爸爸
```
物件內原本的屬性(dad)，給他一個新的變數(newDad)，consolo.log(dad)時，就會發現原先的屬性已經找不到，已經被新宣告的變數取代。
### 預設值
下方範例宣告一個陣列有設定好的資料，後面會等於一個新的陣列，但因為只有一個值，所以只會替換掉第一個設定好的值，第二個仍然會維持預設值。
```javascript
let [ tim = '提姆', joshua = '約約' ] =['媽媽'];
console.log(tim, joshua);
```
Sign in with Wallet
Connect another wallet