es6之解构赋值详解

一、数组的解构赋值

//ES6方法：结构一致，一一对应
let [name,age] = ["zhangsan", 18];

let [x,[y,z]] = [7, [8, 9]];

//不完全提取
let [,,height] = ["zhangsan", 18,180];

二、字符串的解构赋值

let [a, b, c, d] = "hxsd";
console.log(a, b, c, d); // 结果：h x s d

三、对象的解构赋值（重点，提取并重命名）

let obj = {
name: {firstName:"zhang",lastName:"san"},
city: "beijing",
hobby: ["足球","篮球","游戏","读书"]
};
//变量名要与对象key一致，可以使用冒号':'定义新变量名

//重点，提取并重命名
let {name:new_name,name:{firstName:fname,lastName},city, hobby} = obj;
console.log(new_name,fname,hobby);

四、使用

注意：解构失败，变量的值等于undefined。

1、交换变量值

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

2、提取变量

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

3、默认值（重点）

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

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

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

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

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

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

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

4、函数参数的解构赋值（重点）

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

如果传入undefined，将触发该参数等于默认值，null则没有这个效果。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

上面代码中，x参数对应undefined，结果触发了默认值，y参数等于null，就没有触发默认值。

备注

解构赋值常与展开运算符联合使用