---
# System prepended metadata

title: JS 筆記 - ES6：解構賦值

---

# JS 筆記 - ES6：解構賦值

![ES6](https://firebasestorage.googleapis.com/v0/b/timpicturespace.appspot.com/o/js-ES6.png?alt=media&token=0bf94bee-c7cd-4cc0-b619-45e5bf71d07b)

## 陣列的解構賦值

### 基本解構賦值的概念

下方有一陣列資料：

```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);
```

