持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

解构赋值：

MDN解释：解构赋值语法是一种 Javascript 表达式。通过解构赋值， 可以将属性/值从对象/数组中取出，赋值给其他变量。参考[：developer.mozilla.org/zh-CN/docs/…]

比如在不需要临时变量的情况下可以直接交换下面两个元素的值：

对象、函数和数组逐个对应表达式，解构对象并且无声明赋值：


({a, b} = {a: 1, b: 2});

数组当你同时赋值许多个变量的时候，有可能是这样的：

let a = 1;
let b = 2;
let c = 3;
let d = 4;

使用数组中的元素的时候：

let [a, b, c, d] = [1, 2, 3, 4];
a // 1
b // 2
c // 3
d // 4

对于解构一些嵌套层数很多的数组的时候，只要等式两边的层级结构相同就可以直接匹配了：

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

当数组两边的结构不同的时候：

let [a, b, c] = [1, 2, 3, 4]; // 1 2 3
let [a, b, c, d] = [1, 2, 3]; // 1 2 3 undefined
let [a, [b, c, [d, e]]] = [1, [2, 3, [4, 5, 6]]]; // 1 2 3 4 5

对象的解构赋值

let { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

根据属性进行解构赋值

let { a: b } = { a: 'aaa', b: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; 
f // 'hello'
l // 'world'

函数的解构赋值主要是分为对象和数组的解构赋值（1）对象类型的参数结构

function fetch(option) {
    var name = option.name;
    var age = option.age;
    var like = option.like;
}
function fetch({ name, age, like }) {
    // 参数经历了 let { name, age, like } = option
    console.log(fetch);

}
fetch({ name: 'anna', age: 12, like: 'study' });

（2）数组类型的参数结构

const arr = [
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4]
];
const newArr = arr.map(([x, y]) => x + y);
newArr
console.log(newArr);// [ 2, 4, 6, 8 ]

还可以对参数指定默认值，可以避免拿不到参数的情况

function func({ name = '苏大强', age = 50, like = '蔡根花宝贝' }) {
    console.log(name, age, like);
}
const options = { name: '苏大强' }
func(options);

//苏大强 50 蔡根花宝贝

总结：对于js的解构赋值在面试中问的也比较常见，比如不使用临时变量的情况交换元素的值，或者在函数返回的时候只能返回一个值，可以将返回的值放在数组或者对象，通过解构拿出来就很方便。

ES6的新特性-解构赋值

解构赋值：