JavaScript变量的解构赋值

数组的解构赋值

在es6之前我们访问数组里的元素一般都是通过下标，es6之后新增了解构赋值的语法。
es6之前

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

es6之后

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

对于嵌套的数组解构也可以使用解构赋值

let arr = [1, [2, 3], 4];
let [a, [b, c], d] = arr;
console.log(a, b, c, d); // 1 2 3 4

如果只想获得后面的值，解构的时候可以不用写前面的变量

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

如果结构不成功，则会返回undefined。如果解构返回值为undefined可以设置默认值

const arr = [];
const [a,b = 1] = [];
console.log(a, b); // undefined 1

如果设置的默认值是表达式，那么这个表达式会进行惰性求值，即只有再用到的时候才会求值。

const arr = [];
function b() {
	console.log("b");
}
const  [a = b()] = arr;

对象的解构赋值

不仅数组可以解构，对象也可以解构

const obj = { a: "a", b: "b" };
const { a, b } = obj;
console.log(a, b); // a b

和数组不同的是，对象的解构可以不用按照顺序进行，只要变量和对象的属性一样就可以取到值。

const obj = { a: "a", b: "b" };
const { b, a } = obj;
console.log(b, a); // b a

解构不成功会返回undefined并且可以设置默认值

const obj = { a: "a", b: "b" };
const { c, d = "d" } = obj;
console.log(c, d); // undefined "d"

如果有重名的变量，可以重命名

const a = "aa";
const obj = { a: "a", b: "b" };
const { a: A } = obj;
console.log(a, A); // aa a

但是如果没有重名的变量又使用重命名，此时对前面的变量取值会报错

const obj = { a: "a", b: "b" };
const { a: A } = obj;
console.log(a); // ReferenceError: a is not defined

对象也可以使用嵌套解构

const obj = { a: { a1: { a11: "a11" }, b1: "b1" }, b: "b" };
const { a: { a1: { a11 }, b1 }, b } = obj;
console.log(a11, b1, b); // a11 b1 b

这个时候如果要取a和a1的值就会报错，如果要取值的话可以写成下面这样

const {a, a: { a1, a1: { a11 }, b1 }, b } = obj;

函数参数的解构赋值

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

function func([a, b]) {
	return a + b;
}
console.log(func([2, 3])); // 5

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

function func({ a = 10, b = 20 } = {}) {
	return a + b;
}
console.log(func()); // 30
console.log(func({})); // 30
console.log(func({ a: 1, b: 5 })); // 6

上面代码中函数的参数是一个对象，通过对这个对象进行解构，得到变量 a 和 b。如果解构失败 a 和 b 就等于默认值。

下面的写法会得到不一样的结果

function func({a, b} = { a: 10, b: 20 }) {
	return [a, b];
}
console.log(func()); // [10, 20]
console.log(func({})); // [undefined, undefined]
console.log(func({ a: 1, b: 10 })); // [1, 10]

这种写法是为函数的参数指定默认值，而不是为变量 a 和 b 指定默认值，所有会得到与前一种写法不同的结果。