# 【ES6】賦值解構

### 取出特定值作為變數

```JavaScript
// #1 取出特定值作為變數
const person = {
  name: '小明',
  age: 16,
  like: '鍋燒意麵'
}
const {name, age} = person;
console.log(name, age); // 小明, 16
```

### 陣列解構

<div id="bkmrk-"><div></div></div>```shell
const arr = ['小明', '杰倫', '漂亮阿姨'];
const [Ming, Jay ] = arr;
console.log(Ming, Jay); // '小明', '杰倫'
```

### 解構加展開

```JavaScript
const people = {
  Ming: {
    name: '小明',
    age: 16,
    like: '鍋燒意麵'
  },
  Jay: {
    name: '杰倫',
    age: 18,
    like: '跑車'
  },
  Auntie: {
    name: '漂亮阿姨',
    age: 22,
    like: '名牌包'
  }
}
const { Ming,...other} = people;
console.log(Ming, other );
// Ming
// {
//     name: '小明',
//     age: 16,
//     like: '鍋燒意麵'
// }

// other
// {
//   Jay: {
//     name: '杰倫',
//     age: 18,
//     like: '跑車'
//   },
//   Auntie: {
//     name: '漂亮阿姨',
//     age: 22,
//     like: '名牌包'
//   }
// }
```

### 解構加上重新命名

```JavaScript
// 冒號：別名
const { Ming:AAA,...other} = people;
console.log(AAA, other );
```

### 函式參數解構

```JavaScript
const person = {name: "Sam", age: 18};

const fn = function({name, age}){
console.log(name,age) 
}

fn(person); // Sam 18
```

### 解構在React應用

###  

```JavaScript

const { useState } = React;
```