ES6之——变量的解构赋值

一、数组的结构赋值

---

1>、什么是解构？

ES6允许我们队数组和对象中提取值，对变量进行赋值，这被叫做“解构”。 通常我们像下面这样为变量赋值：

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

但是，ES6允许我们像下面这样做：

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

即从数组中提取值，按照位置的对应关系，对变量赋值。

2>、嵌套数组解构

再来看看嵌套数组解构的例子：

var [foo, [[bar], baz]] = [1, [[2], 3]];
foo //1
bar //2
baz //3


var [,, third] = ['foo', 'bar', 'baz'];
third // 'baz'


var [head, ....tial]= [1, 2, 3, 4];
head //1
tail //[2, 3, 4]

3>、解构不成功、解构失败

如果解构不成功，变量的值就等于undefined。以下几种情况均属于解构不成功：

// 以下均解构不成功
var [foo] = [];
var [foo] = 1;
var [foo] = "Hello";
var [foo] = false;
var [foo] = NaN;

还要，当对undefined和null解构时，就会报错。

// 报错
var [foo] = undefined;
var [foo] = null;

为什么会报错呢？因为解构只能用于数组和对象，其它原始类型的值都可以转为相应的对象。但是，undefined和null不能转为对象，因此会报错。

4>、解构赋值允许指定默认值

var [foo = true] = [];
foo //true

5>、解构还适用于let和const命令

var [v1, v2, ...., vN] = array;
let [v1, v2, ...., vN] = array;
const [v1, v2, ...., vN] = array;

二、对象的解构赋值

---

var {foo, bar} = {
    foo: "aaa",
    bar: "bbb"
};

foo //"aaa"
bar //"bbb"

和数组解构不同，对象解构时，对象的属性没有顺序，变量必须与属性同名才能取得正确的值。

var {bar, foo} = {
    foo: "aaa",
    bar: "bbb"
};

foo //"aaa"
bar //"bbb"


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

1>、嵌套解构的对象

var o = {
    p: [
        "Hello",
        { y: "World" }
    ]
};

var { p: [x, { y }] } = o;
x //"Hello"
y //"world"

2>、指定默认值的对象解构

var { x = 3 } = {};
x //3

3>、特别注意

// 错误写法
var x;
{ x } = {x : 1};
// SyntaxError: Syntax error

报错的原因是，JS引擎会将{x}理解成一个代码块，从而发生语法错误。解决的办法也很简单，只要不讲大括号写在行首，避免JS将其解释为代码块就行了。例如，像下面这样：

// 正确的写法
({x}) = {x:1};

// 或者
({x} = {x:1});

三、用途

---

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

1>、交换变量的值

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

2>、从函数中返回多个值

函数只能由一个返回值，如果要返回多个返回值，只能将它们放在数组或对象里返回。但，有了解析解构，取出这些值就变得非常方便了。看看下面的代码示例：

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

var [a, b, c] = example();

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

var {foo, bar} = example();

3>、函数参数的定义

function ({s, y, z}) {
    // ..........
}

f({x: 1, y:2, z:3});

这种写法对提取JSON对象中的数据，尤其重要。

4>、函数参数的默认值

jQuery.ajax = function (url, {
    async = true,
    beforeSend = function() {},
    cache = true,
    complete = function() {},
    crossDomain = false,
    global = true,
    // ....其它设置
}) {
    // ... do stuff
};

通过指定参数的默认值，可以避免在函数体内写var foo = config.foo || ‘default foo’;这样的语句。

5>、遍历Map结构

任何部署了Iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的结构赋值，获取键名和键值就变得很方便了。

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 id world

只获取键名，或者只获取键值。

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

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

6>、输入模块的指定方法

在加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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