ES6入门：变量的解构赋值

1.数组的解构赋值

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

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

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

ES6 允许写成下面这样。

let [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 // []

如果解构不成功，变量的值等于undefined

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

以上两种情况都属于解构不成功，foo的值都会等于undefined。

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

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

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

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

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

上面代码中，fibs是一个 Generator 函数（参见《Generator 函数》一章），原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。

默认值

解构赋值允许指定默认值

let [foo=true]=[]; // foo=true
let [x,y='b']=['a']  //x='a', y='b'
let [x,y='b']=['a',undefined] // 结果同上

注意：ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以只有当一个数组成员严格等于undefined,默认值才会生效。

let [x=1]=[null]  // x=null

默认值没有生效，因为null不严格等于undefined

2. 对象的解构赋值

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

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

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果变量名与属性名不一致，必须写成下面这样

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

对象解构也可以有默认值

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

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

4. 函数的解构赋值

函数的参数也可以使用解构赋值。

function add([x,y]){
	return x+y;
}
console.log(add([2,5]));  
// 7

函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数被解构成变量x和y。

函数参数的解构也可以使用默认值。

function move({x=0,y=0}={}){
	return [x,y]
}
console.log(move({x:3,y:8})) //[3,8]
console.log(move({x:3})) //[3,0]
console.log(move({})) // [0,0]
console.log(move())  //[0,0]

5.用途

（1）交换变量的值

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

（2）函数返回多个值

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

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

（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 对象中的数据，尤其有用。

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

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

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