解构赋值

assignment-destructuring

let pony = {
    foo: 'lala',
    baz: 'papa'
};

基本用法

let {foo} = pony;// 若只有一个元素不建议这么写
// 等价于
let foo = pony.foo;

重命名

当后台的命名像屎一样时特别有用

let {foo: baz} = pony;
// 等价于
let baz = pony.foo

解构的同时设置默认值

let {baz = 'bar'} = foo;
// 等价于
let baz = foo.baz || 'bar'; // 主要是用来避免 foo 没有 baz 属性

获取多个值

let {foo, bar: baz} = {foo: 0, bar: 1};
// 等价于
let foo = 0;
let baz = 1;

获取更深层的数据

let target = {foo: {bar: 'baz'}};
let {foo: {bar}} = target;
// 等价于
let bar = target.foo.bar;
// 同样你也可以进行重命名
let {foo: {bar: deep}} = target; // deep = 'baz'

没有匹配的字段会返回 undefined

let {foo} = {}
// foo = undefined

层级较深时小心报错

let {foo: {bar}} = {}
// 其实较好理解， foo = undefined undefined.bar 肯定是报错的

解构赋值也适用于数组

let [a, b] = [0, 1];
// 等价于
let a = 0;
let b = 1;

可以跳过数据中某个元素进行赋值👍

let [a, , b] = [0, 1, 2]
// 等价于
let a = 0;
let b = 2;

交换变量 ✍️

这里我并不懂它为啥就会交换了😢

[a, b] = [b, a]

函数的参数也可以进行解构

参数的解构赋值可以解决参数顺序问题，但是它也有自己麻烦的地方赋默认值时不是特别友好，大家自行体会下

function test({a = 1, b = 2} = {}) {
    console.log(a, b);
}
test();

总结

学习解构赋值大家只需记住模式匹配即可， 前面是模式，后面是变量，二者重名时可以合二为一。