ES2015入門系列5-解構賦值

用過ReactNative的同窗確定見過相似下面的代碼:

import { Text, View } from 'react-native';

這就是ES2015爲JavaScript帶來的另外一個新的語法：解構賦值。

解構賦值(Destructuring assignment), 是用來讓咱們從數組或者對象中提取數據賦值給不一樣的變量。

語法以下:

• 從數組中解構賦值

let [a, b] = [1, 2];

• 從對象中解構賦值

let {a, b} = {a: 1, b: 2}

PHP開發者有沒有以爲很眼熟? 對了，這不就是:

list($a, $b) = [1, 2];

沒錯，如你所想，ES2015從數組中解構賦值和PHP的語法同樣，也能夠忽略某些返回值, 甚至全忽略

let [a, , c] = [1, 2, 3];
[, ,] = [1, 2, 3];

數組的解構賦值很簡單，咱們繼續來看看對象的解構賦值:

let object = {
  f: 1,
  b: 2
}

let {f, b} = object;

那我想賦值給不一樣變量的名字該怎麼辦呢，以下：

let {f: foo, b: bar} = object;

要記住，這樣一來，真正初始化並賦值的是foo 和 bar。

解構賦值操做不會拋錯(Fail-soft)，若是沒有找到，將會用undefined賦值過去。

let [a] = []; // a === undefined
let {b} = {}; // b === undefined

一樣，咱們也能夠設置默認值:

let [a = 1] = []; // a === 1
let {b = 2} = {}; // b === 2

也能夠應用在函數參數中:

function draw({color, using = '粉筆'}) {
  console.log('使用' + color + '的' + using + '畫畫!');
}
draw({color: '紅色'});
draw({color: '藍色', using: '蠟筆'});

結果以下：

> 使用紅色的粉筆畫畫!
> 使用藍色的蠟筆畫畫!