车栈

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: '蜡笔'});

结果如下：

> 使用红色的粉笔画画!
> 使用蓝色的蜡笔画画!