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: '蜡笔'});
结果如下:
> 使用红色的粉笔画画!
> 使用蓝色的蜡笔画画!