ES6学习-解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值可以用var、let、const声明。且凡是具有Iterator接口的对象都可以进行解构赋值。并且解构的同时可以为其指定默认值。

1.数组的解构赋值

// ES5
var a = 1,
b = 2,
c = 3;

// ES6
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

let [a, [b, c]] = [1, [2, 3]];
console.log(a); //1
console.log(b); //2
console.log(c); //3

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [a, b] = ['a'];
console.log(b) // undefined

如果解构失败的话，对应的变量的值就是undefined。

let [a, b, c] = [1, 2, 3, d];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

如果左面的变量只匹配到了右面的部分，则解构不完全。

let [a, b = 2] = [1];
console.log(a); // 1
console.log(b); // 2

let [a = 1, b = a] = [];
console.log(a); // 1
console.log(b); // 1

let [a = b, b = 2] = [];
console.log(a); //  b is not defined

我们可以在解构的同时为变量设置默认值。并且变量可以引用其他的解构变量，但这时，变量必须提前声明。

2.对象的解构赋值

var { foo, bar } = { foo: 1, bar: 2 };
foo // 1
bar // 2

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: 1, bar: 2 };
foo // 1
bar // 2

let { foo: a, bar:  b} = { foo: 1, bar: 2};
a // 1
b // 2

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者。

let foo;
let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

注意，采用这种写法时，变量的声明和赋值是一体的。对于

let

和

const

来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。上面代码中，解构赋值的变量都会重新声明，所以报错了。不过，因为

var

命令允许重新声明，所以这个错误只会在使用

let

和

const

命令时出现。如果没有第二个

let

命令，上面的代码就不会报错。

let {x = 3} = {};
x // 3

let {x, y = 5} = {x: 1};
x // 1
y // 5

let {x:y = 3} = {};
y // 3

let {x:y = 3} = {x: 5};
y // 5

默认值生效的条件是，对象的属性值严格等于

undefined

。

let {x = 3} = {x: undefined};
x // 3

let {x = 3} = {x: null};
x // null

上面代码中，如果

x

属性等于

null

，就不严格相等于

undefined

，导致默认值不会生效。如果解构失败，变量的值等于

undefined

。

// 报错
var {foo: {bar}} = {baz: 'baz'};

上面代码中，等号左边对象的

foo

属性，对应一个子对象。该子对象的

bar

属性，解构时会报错。

foo

这时等于

undefined

，再取子属性就会报错。

3.字符串的解构

let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length : length} = 'hello';
length // 5

此时，字符串被转换成了一个类似数组的对象。类似数组的对象都有一个

length

属性，因此还可以对这个属性解构赋值。

4.函数参数的解构赋值

function add([x, y]){
return x + y;
}
add([1, 2]);

5.使用场景

变量的解构赋值用途很多。

  a . 交换变量的值

[x, y] = [y, x];

  b . 函数返回多个值

// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();

 c . 函数参数

// 参数有序
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数无序
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

 d . 提取JSON

let json = {
a: 1,
b: 2,
c: 3
};
let { a, b, c } = json;

上面代码可以快速提取JSON数据的值。

 e . 遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值。

// 获取键名
for (let [key] of map) {
// ...
}

// 获取键值
for (let [,value] of map) {
// ...
}

 f . 输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

 

参考自 ： http://es6.ruanyifeng.com/#docs/destructuring