ES6 学习笔记之变量的解构赋值

我与梦想有个约会

发布于 2020-01-05 16:29:54

3560

发布于 2020-01-05 16:29:54

文章被收录于专栏：jiajia_dengjiajia_deng

ES6 中增加了几种对变量初始化的方式，从改进来看，个人觉得可以大大的增加编码的效率。带相对语法可能就晦涩一些了。但总归熟能生巧，多用就不会那么容易犯错了。

ES5 中给多个变量赋值写法如下：

let a = 1;
let b = 2;
let c = 3;

而 ES6 中则一句话搞定：

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

摘抄书中的一句话“ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。”，更多对于变量的解构赋值请参考书中的详细介绍，我个人觉得平时可能用不到那么变态的用法。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

通过上面的代码可以看出，如果赋值时不指定具体内容，那么会使用我们准备好的默认值，这与其他一些语言中的函数默认参数差不多。更多细节请参考书中介绍。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

对象的解构赋值相对严格一些，它不是按顺序解析的，而是按成员名称匹配解析的。其他字符串、布尔、函数参数都具有解构赋值的特性。且均无明显差异。书中介绍了一些解构赋值的常用应用场景，比如下面这个案例，通过解构赋值就很方便的遍历了 map 中的内容。

var map = new Map();
map.set('first', 'Hello');
map.set('second', 'World');

for (let [key, value] of map) {
  console.log(key + ' is ' + value);
}