解构赋值的深入理解
场景：一个赋值语句看不懂，大概如下第二句。
参考：MDN的解构赋值
总结：知识点只知道一部分是不够的，遇到问题好好处理，抓住每一次补基础的机会。
解构赋值语法是一种 Javascript 表达式
通过 解构赋值，可以将 属性/值 从 对象/数组 中取出，赋值给其他变量。
对象和数组逐个对应表达式，提供了一种简单的定义一个特定的数据组的方法。
// 1、常见 a=10,b=20
[a, b] = [10, 20];
// 2、常见 a=10, b=20, rest=[30,40,50]
[a, b, ...rest] = [10, 20, 30, 40, 50];
// 3、【知识盲点】a=10,b=20
({ a, b } = { a: 10, b: 20 });
着重分析这次的盲点：
解构赋值使用了相同的语法，不同的是在表达式 左边定义了要从原变量中取出什么变量。
var x = [1, 2, 3, 4, 5];
var [y, z] = x; // y=1,z=2
MDN中提到的妙用—-解构数组
1、默认值
// 为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值
[a=5, b=7] = [1]; // a=1,b=7
2、交换变量
// 在一个解构表达式中可以交换两个变量的值
[a, b] = [b, a];
3、解析一个从函数返回的数组
// 可以使用解构在一行内完成解析
function f() {return [1, 2]}
var a, b;
[a, b] = f(); // a=1, b=2
4、忽略某些值
function f() {return [1, 2, 3]}
var [a, , b] = f();// a=1,b=3
5、将剩余数组赋值给一个变量
这里的重点是：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。
var [a, ...b,] = [1, 2, 3];// SyntaxError
MDN中的妙用–解构对象
1、无声明赋值
var a, b;
({a, b} = {a: 1, b: 2}); // 圆括号是必须的
{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
2、解构嵌套 对象和数组
const metadata = {
title: 'aQiu',
translations: [
{
locale: 'passion',
title: 'resistance'
}
],
url: '浪漫至死不渝'
};
let {
title: a,
translations: [
{
title: b,
},
],
} = metadata;
console.log(a, b); // aQiu resistance
3、For of 迭代和解构
var people = [
{
name: '比奇堡',
family: {
mother: '海绵宝宝',
father: '派大星',
},
age: 35
},
{
name: '菠萝屋',
family: {
mother: '海绵宝宝',
father: '小蜗',
},
age: 25
}
];
for (var {
name: n,
family: {
father: f
}
} of people) {
console.log('name: ' + n + ', father: ' + f);
}
// name: 比奇堡, father: 派大星
// name: 菠萝屋, father: 小蜗
4、解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）
var obj = {self: '123'}; // 声明对象 和 自身 self 属性
obj.__proto__.prot = '456'; // 在原型链上定义
const {self, prot} = obj;
// self "123" , prot "456"（访问到了原型链）