（2） 变量的解构赋值

一、 数组的解构赋值

1. 基本语法

ES6允许按照一定模式， 从数组和对象中提取值， 对变量进行赋值， 这被称为解构（ Destructuring） 。

以前， 为变量赋值， 只能直接指定值。

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

而ES6允许这样书写：

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

我的天！我表示已经惊讶了！这么方便快捷的就可以定义一组数据，而且看起来非常直观。

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

比如说：

var [a,,c] = [1,2,3]
// a = 1
// c = 3

而空的是undefined。。这个和数组其实看起来没有什么区别。

另一种情况是不完全解构， 即等号左边的模式， 只匹配一部分的等号右边的数组。 这种情况下， 解构依然可以成功。

如果等号的右边不是数组（ 或者严格地说， 不是可遍历的结构） ， 那么将会报错。

var [foo] = 1;

类似于这样的代码都会报错。

而解构赋值不仅适用于var命令， 也适用于let和const命令。

对于Set结构， 也可以使用数组的解构赋值 。

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

2. 默认值

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

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


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

 

二 、对象的结构赋值

 

解构不仅可以用于数组， 还可以用于对象。

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

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

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

如果等号左边的两个变量的次序， 与等号右边两个同名属性的次序不一致， 但是对取值完全没有影响。

但是如果变量没有对应的同名属性， 导致取不到值， 最后等于 undefined 。

而从本质上来说，其实对象的解构赋值是下面形式的简写 ：

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

现在可以理解了吧？为什么说顺序不重要，而“属性名”要相对应。

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

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

这个例子就很能够说明这一问题了。

但是需要注意的是： 采用这种写法时， 变量的声明和赋值是一体的。 对于let和const来说， 变量不能重新声明， 所以一旦赋值的变量以前声明过， 就会报错。

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

不过， 因为 var 命令允许重新声明， 所以这个错误只会在使用 let 和 const 命令时出现。 如果没有第二个let命令， 上面的代码就不会报错。

和数组一样， 解构也可以用于嵌套结构的对象。

var obj = {
    p: [
    "Hello",
    { y: "World" }
    ]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意， 这时 p 是模式， 不是变量， 因此不会被赋值。

这里看的我头晕。。。为什么赋个值都要写的这么复杂呢？目的也许是为了反映一个问题吧。。。

var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
var {loc: {start: {line}} } = node;
console.log(line);  // 1

上面代码中， 只有 line 是变量， loc 和 start 都是模式， 不会被赋值。

对象的解构也可以指定默认值。

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

与数组类型一样，如果解构失败， 变量的值等于 undefined 。

对象的解构赋值， 可以很方便地将现有对象的方法， 赋值到某个变量。

let { log, sin, cos } = Math;

上面代码将 Math 对象的对数、 正弦、 余弦三个方法， 赋值到对应的变量上， 使用起来就会方便很多。

 

三、 字符串的解构赋值

 

神奇的是。。。字符串也可以解构赋值。 这是因为此时， 字符串被转换成了一个类似数组的对象。

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 {toString: s} = 123;
s === Number.prototype.toString // true


let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中， 数值和布尔值的包装对象都有 toString 属性， 因此变量 s 都能取到值。

解构赋值的规则是， 只要等号右边的值不是对象， 就先将其转为对象。 由于 undefined 和 null 无法转为对象， 所以对它们进行解构赋值， 都会报错 。

 

五、 函数参数的解构赋值

 

居然连 函数的参数也可以使用解构赋值！我的天呐！

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

上面代码中， 函数 add 的参数表面上是一个数组， 但在传入参数的那一刻， 数组参数就被解构成变量 x 和 y 。 对于函数内部的代码来说， 它们能感受到的参数就是 x 和 y 。

 

六、 圆括号问题

 

解构赋值虽然很方便， 但是解析起来并不容易。 对于编译器来说， 一个式子到底是模式， 还是表达式， 没有办法从一开始就知道， 必须解析到（ 或解析不到） 等号才能知道。

由此带来的问题是， 如果模式中出现圆括号怎么处理。 ES6的规则是， 只要有可能导致解构的歧义， 就不得使用圆括号。

但是， 这条规则实际上不那么容易辨别， 处理起来相当麻烦。 因此， 建议只要有可能， 就不要在模式中放置圆括号。

七 、 用途

 

看的也很累。。最后来看看用途吧。

（1） 交换变量的值

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

上面代码交换变量x和y的值， 这样的写法不仅简洁， 而且易读， 语义非常清晰。

（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 f([x, y, z]) { ... }
f([1, 2, 3]);

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

（4） 提取JSON数据

解构赋值对提取JSON对象中的数据， 尤其有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);  // 42, "OK", [867, 5309]

（5） 函数参数的默认值

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

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

（6） 遍历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

（7） 输入模块的指定方法

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

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

 

这一章信息量超大。。。需要反复的看好几遍才能领悟其中的精髓啊！