ES6 解构变量

简单说说

假设有这样一个场景：你需要向你的服务器获取一些基本的数据（config 对象）来初始化页面。当你需要去获取其中的配置项时， ES5 是这么写的：

var config = { params1: 520, params2: 1314 };
// 为了确保下方的代码不依赖于 config 对象，重新赋值为一个更有意义的名称。
var params1 = config.params1, 
    params2 = config.params2

console.log(params1 + ' !! ' + params2)

// 520 !! 1314

看着代码量也不是很大，但这只有两个配置项，万一要有几十个呢，不得一直 congif.xxx 了。不得不得这的确很烦，那有没更简单的方式呢？ ES6 提出了以下方式：

var config = { params1: 520, params2: 1314 }
var { params1, params2 } = config

console.log(params1 + ' !! ' + params2)

// 520 !! 1314

这只是简单的实现，对于需要保存的变量名如果和属性名不一致也是可以解决的。

var config = { params1: 520, params2: 1314 }
var { params1: other1, params2: other2 } = config

console.log(other1 + ' !! ' + other2)

// 520 !! 1314

// 第一种写法其实就是如下的简写
var { params1: params1, params2: params2 } = config

好了，尝完鲜。接下来正式介绍介绍 ES6 中的解构赋值。

解构是什么？

简单来说就一句话：按照一定规则，从对象或是数组中提取数据。

数组方式的解构

一个简单的例子：

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

console.log(a, b, c);

// 1 2 3

应用场景：从类数组结构中取值，当然仅仅是取值，改值它不在行。

需要注意的一点是：只要 = 两边的样子一样（模式一致），就能成功执行，也就是说能够使用嵌套数组的形式。以下为一些嵌套数组的例子：

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo         // 1
bar         // 2
baz         // 3

let [ , , third] = ['foo', 'bar', 'baz'];

third       // 'baz'

let [x, , y] = [1, 2, 3];

x           // 1
y           // 3

let [head, ...tail] = [1, 2, 3, 4];

head        // 1
tail        // [2, 3, 4]

let [x, y, ...z] = ['a'];

x           // 'a'
y           // undefined
z           // []

注：

1. 代码里的 ...* 代表将剩下的所有的变量放在一个数组中，在称为不定变量。
2. 在 js 中是允许 [ , , 3] 这种形式的数组赋值方式的，默认值为 undefined （其实也不能说是默认值，就如它的字面意思一样：未定义）。
3. 如果解构不成功，变量的值就为 undefined，如下代码所示：

let [foo] = [];
let [bar, foo] = [1];

// foo 的值都为 undefined

当然，JavaScript 是一种动态语言，因此对于 = 两边的数组它们的形式即使不完全相同，也能够赋值（当然前面的结果要是后面结构的子集）。这种赋值方式为：不完全解构。如下所示：

let [x, y] = [1, 2, 3];
x           // 1
y           // 2

let [a, [b], d] = [1, [2, 3], 4];
a           // 1
b           // 2
d           // 4

下面讲讲数组解构的一些注意点：

• 数组解构不仅仅适用于数组解构，所有的可遍历的结构（实现了 Iterator 的接口）都可以使用数组解构方式。比如说 Set。

let [x, y, z] = new Set(['a', 'b', 'c']);
x           // 'a'

适用于所有的变量 var/let/const。

结构两边的结构必须一致，即 = 两边的格式必须相同，即可 [] 对应可遍历结构，但长度可不同。以下代码都会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

一个较为综合的例子

function* fibs() {
    var a = 0;
    var b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

var [first, second, third, fourth, fifth, sixth] = fibs();

sixth       // 5

注： fibs 实现了 Iterator 的结构，这里先理解为执行完 fibs 就会获得一个数组（当然这只是理解为，其实是一个迭代器），数组的规则是后一个数是前两数字的和。关于 yield 和 function* 可以查看 Generator。

设置默认值

解构赋值允许指定默认值。

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

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

注： ES6 内部使用严格运算符（ === ）来判断一个值是否有值，所以只要对应在数组中值不为 undefined ，默认值都不会有效果。了解 JavaScript 的话，这理解起来不算难。undefined 本身代表的就为没有。

var [x = 1] = [undefined];
x // 1

var [x = 1] = [null];
x // null

当然求值怎么能没有 function 的戏码呢？函数式编程可是 JavaScript 的一大特性。解构赋值时，可以将默认值设置为一个函数的调用，并且这个表达式是惰性求值的，即只有在用到的时候，才会求值。如下所示：

function func() {
  console.log('解构不成功，请检查')
}

let [x = func()] = [];
console.log(x)
// 解构不成功，请检查

let [y = func()] = ["test"];
console.log(x)
// "test"

默认值也可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = []
// x=1; y=1
let [x = 1, y = x] = [2]
// x=2; y=2
let [x = 1, y = x] = [1, 2]
// x=1; y=2
let [x = y, y = 1] = []
// ReferenceError

如果看过上一节关于 let 暂时性死区的相关内容，就很容易理解了。默认值的声明和 let 遵循的规则一致。

对象形式的解构

只要理解了数组形式的解构方式，对象形式的解构就比较容易理解，数组形式可以理解按索引来对应象变量与数组内的值，而对象形式就是按照 key 值来对应变量与对象内的值：

var { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo         // 'aaa'
bar         // 'bbb'

当然既然和索引没有关系了，那么赋值的顺序对于解构是没有影响的，也就是下面的写法是没有问题的，但是对于没有的 key 值是取不出数据的。

var { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo         // 'aaa'
bar         // 'bbb'

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

但是还有一种情况是这样的：需要取的值的 key 和要被赋值的变量名不相同，就需要命名解构：

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f           // 'hello'
l           // 'world'

并且上面简单的解构方式其实是下面写法的简写。

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

下面就针对下面代码来理解下对象解构。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };

想象一个场景： foo 相当于中介，把 'aaa' 这栋楼卖给了房客 baz ，而对于简单解构方式来说，其实就相当于 foo 把这房子卖给了自己，其实 foo 在语法上称为模式，而简单解构只不过是模式和变量同名了而已。

在赋值时还须注意的是：由于 let 和 const 变量是不允许重复声明的， const 甚至连声明和赋值分开都会报错，用解构方式赋值时，变量的声明和赋值是同时进行的，所以下面的代码会报错：

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

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

由于重复声明了，所以代码报错，但是 var 变量是允许重复声明的，所以 var 变量是可以这么写的。而对于已经声明的变量，可以用以下的方式进行解构赋值：

let foo
({ foo } = { foo: 1 }) // 成功

let baz
({ bar: baz } = { bar: 1 }) // 成功

但是，这样写赋值解构的意义就不显的很大了。而且会产生下面这种很矛盾的情况出现：

let foo
({ foo, baz } = { foo: 1,baz:2 })

this.foo        // undefined 说明是let变量
this.baz        // 2  说明这个是var变量

// 我们接下去进行变量的重新声明

let foo = 1     // TypeError
var foo = 1     // TypeError

var baz = 2     // 成功了，这也是 var 变量的特点
let baz = 2     // 也成功了， var 声明的变量可以用 let 继续声明，但是在下去就不行了。

所以，解构还是按照第一种写法来写，这样解构出来的变量是统一类型的，并且要放在代码块的头部。

解构是可以用于有嵌套结构的对象的。

let obj = {
    p: [
        'Hello',
        { y: 'World' }
    ]
};

let { p: [x, { y }] } = obj;
x           // 'Hello'
y           // 'World'

关于模式的一个例子：

let node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};

let { loc: { start: { line } } } = node;
line        // 1
loc         // error: loc is undefined
start       // error: start is undefined

观察这个例子，可以发现：只有 line 是变量， loc 和 start 都是模式。也就是说只要有 : 出现， : 前的都是模式，用于匹配取值，真正赋值的对象在 : 的后面，当然没有 : 出现它本身即是模式也是变量。

嵌套赋值的例子：

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj         // { prop:123 }
arr         // [ true ]

对象的解构也是可以指定默认值的。判定是否赋值的条件和数组赋值一样，对象属性严格等于 undefined：

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

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

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

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

var { message: msg = 'Something went wrong' } = {}
msg         // 'Something went wrong'

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

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

如果解构失败，变量的值为 undefined

var { foo } = { bar: 'baz' };
foo         // undefined

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

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

上面代码的写法会报错，因为 JavaScript 引擎会将 { x } 理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

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

对象解构的一些技巧

• 方便地将现有对象的方法，赋值到某个变量

let { log, sin, cos } = Math;

• 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
first       // 1
last        // 3

• 字符串的解构，字符串可以理解为一个类数组的对象，所以字符串也是可以解构的。

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

• 类数组对象都有一个 length 属性，也可用于对象解构。

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

函数参数的解构赋值

函数的参数也是可以用解构来赋值的，并且保存成类似 let 的变量。

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

add([1, 2]);
// 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

解构的一些用途

• 交换变量的值

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

• 从函数返回多个值。函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

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

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

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

let { foo, bar } = example();

• 函数参数的定义，解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3])

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})

• 提取 JSON 数据

let jsonData = {
    id: 42,
    status: 'OK',
    data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, 'OK', [867, 5309]

• 函数参数的默认值

jQuery.ajax = function (url, {
    async = true,
    beforeSend = function () {},
    cache = true,
    complete = function () {},
    crossDomain = false,
    global = true,
    // ... more config
}) {
    // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写 let foo = config.foo || 'default foo' 这样的语句。

• 遍历 Map 结构，支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

let 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) {
    // ...
}

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

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