2.解构赋值
2.1.什么是解构赋值？
什么是解构赋值？这里的关键字还是赋值，这是说如何去赋值的问题，这里说的解构可以理解为解散重新构造，所以解构赋值可以理解为解散重新构造后进行赋值，通常是左边一种结构，右边一种结构，左右的结构拆开来一一对应进行赋值，例如：
let a, b
[a, b] = [1, 2]
console.log(a, b)
这里就相当于把1赋值给a，把2赋值给b，这样的操作就叫做解构赋值，从本质上来说，结构解构赋值是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋值给右边对应的值
为什么要使用解构赋值？在没有解构赋值的时候，多个赋值会比较麻烦，为了书写更加方便，加入解构赋值是非常有必要的，例如：没有解构赋值的时候，交互两个变量的值，我们是这样做的
let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;
console.log(a, b);
有了解构赋值以后，我们的代码可以这样写：
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
2.2.数组的解构赋值
左右两边是数组这种结构，我们称为数组的解构赋值，这样也是非常常用的一种形式
注意1: 解构不成功，值为undefined
let [a, b] = [10]
console.log(a, b) // 10, undefined
注意2: 解构的时候可以设置默认值
let [a, b=20] = [10]
console.log(a, b) // 10 20
注意3: 值比变量多的情况可以使用"..."符号
let [a, b, ...rest] = [1, 2, 3, 4, 5, 6]
console.log(a,b,rest)
//rest元素必须放在最后，下面这种写法会报错
let [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6]
2.3.对象的解构赋值
如果等号左右两边是对象的结构，我们称之为对象的解构赋值，也是非常常用的形式
let { a:a, b:b } = { a: 1, b: 2 }
console.log(a, b)
注意1: 对象的解构赋值和数组不同，数组的赋值是以位置为对应关系进行赋值的，必须按顺序来写，而对象的赋值是以属性名为对应关系的，因此，不用考虑顺序,其内部的机制就是，先找到同名的属性，再把右边的值赋值给左边的变量
注意2: 如果左边的（{属性名:变量名}）属性名和变量名一样，那么可以简写成下面的形式
// let { a:a, b:b } = { a: 1, b: 2 }
//上面这种写法和下面的写法是等价的
let {a, b} = {a:1,b:2}
console.log(a, b)
//如果属性名和变量名是不同的，那必须写完整，例如下面这种写法
let {x:m,y:n} = {x: 1, y: 2}
// 这里的机制是 根据x的对应关系 把1赋值给m 根据y的对应关系，把2赋值给n
注意3: 对象的解构赋值也可以设置默认值
let {a, b=20} = {a: 1}
console.log(a, b) //1, 20
2.4.数组和对象解构赋值嵌套
// 数组的解构赋值嵌套
let [a, [b, c],d] = [1, [2, 3], 4]
console.log(a, b, c, d)
// 对象的解构赋值嵌套
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
//p=['hello', {y: 'world'}] x='Hello' y = 'World'
2.5.解构赋值应用
1.变量交换
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
2.函数返回多个值
function fn() {
return [1, 2, 3];
}
let [a, b, c] = fn();
3.参数定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
4.提取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]
视频教程地址：http://edu.nodeing.com/course/50