ES2015入门系列5-解构赋值

用过ReactNative的同学肯定见过类似下面的代码:

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

这就是ES2015为JavaScript带来的另一个新的语法:解构赋值。

解构赋值(Destructuring assignment), 是用来让我们从数组或者对象中提取数据赋值给不同的变量。

语法如下:

  • 从数组中解构赋值
1
let [a, b] = [1, 2];
  • 从对象中解构赋值
1
let {a, b} = {a: 1, b: 2}

PHP开发者有没有觉得很眼熟? 对了,这不就是:

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

没错,如你所想,ES2015从数组中解构赋值和PHP的语法一样,也可以忽略某些返回值, 甚至全忽略

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

数组的解构赋值很简单,我们继续来看看对象的解构赋值:

1
2
3
4
5
6
let object = {
f: 1,
b: 2
}
let {f, b} = object;

那我想赋值给不同变量的名字该怎么办呢,如下:

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

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

解构赋值操作不会抛错(Fail-soft),如果没有找到,将会用undefined赋值过去。

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

同样,我们也可以设置默认值:

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

也可以应用在函数参数中:

1
2
3
4
5
function draw({color, using = '粉笔'}) {
console.log('使用' + color + '的' + using + '画画!');
}
draw({color: '红色'});
draw({color: '蓝色', using: '蜡笔'});

结果如下:

1
2
> 使用红色的粉笔画画!
> 使用蓝色的蜡笔画画!
本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者