ES6解构赋值

什么叫解构赋值？

ES6允许使用按照一定的模式 从数组或者对象中进行取值 对变量进行赋值 这个过程叫做解构赋值。

1、数组类型解构

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

结构分为4类

①完全结构

let [x, [y, z]] = [1, [2,[3]]];
console.log(x);//1
console.log(y);//2
console.log(z);//[3]

② 不完全解构的情况下 值有多余的

let y = [10,20];
console.log(y);//10

③不完全解构的情况下 没有给赋值 返回undefined

let [x,y] = [10];
console.log(x);//10
console.log(y);//undefined

④等号左右模式不匹配 等号右边的元素不能被遍历 那么就会报错

let [f] = false;
let [f] = NaN;
let [f] = "xdgfjn"; 
let [f] = {}; 
console.log(f);
//这些全都不能遍历 ，导致会报错

2、对象属性解构

let { x, y } = { x: "a", y : "b" }
console.log(x, y) //a   b

①对象结构 ，顺序可以打乱

let { x, y } = { y : "b" ,  x: "a" }
console.log(x, y) // a    b  

②结构对象可以重新命名

let { x: z, y } = { x: "a", y: "b" }
console.log(z, y) // a   b

③嵌套解构

let { x: {y}} = { x: { y: "a", z: "b" } }
console.log(y) // a

④ 默认值

let { x = "a", y: z = "b" } = { x: 1, y: 2}
console.log(x, z) // 1    2  

扩展

①结构赋值允许设置默认值 但是只有当变量的值严格等于undefined的时候 默认值才会生效

let[x, y = "a"] = ["w", ""];
console.log(x, y); //   w   a

②如果默认值是一个表达式 那么这个表达式是惰性求值的 只有到使用的时候 才回去计算或者调用

function f1() {
    return 123
        }

let [x = f1()] = [];
 console.log(x);//123

③默认值可以引用解构赋值中其他的变量 但是这个变量必须是声明过后的

let [x = 1, y = x] = [2, 3];
console.log(x, y); // 2  3


let [x = y, y = 4] = [];
console.log(x, y); // 报错   y没有提前声明

④扩展运算符和解构赋值相结合 可以同时给变量和数组赋值

 let[s, ...k] = [12, 15, 26, 45, 48];
 console.log(s);//12
 console.log(k);//[15,26,45,48]