ES2015入门系列5-解构赋值

May 23, 2016
JavaScript ES2015

用过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;

要记住,这样一来,真正初始化并赋值的是foobar

解构赋值操作不会抛错(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: '蜡笔'});

结果如下:

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