简释解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

数组解构：

常用于交换变量

let a = 1; let b = 2; [a, b] = [b, a]; // a => 2, b => 1 let [a,b] = [1]; console.log(a,b); // a => 1, b => undefined let arr = [1, 2, 3, 4]; let [a, b, ...rest] = arr; console.log(rest, arr); // rest = [3, 4], arr = [1, 2, 3, 4]

对象解构:

变量和属性同名就可以

let { foo: a, bar: b } = { foo: "123", bar: "456" }; console.log(a, b); // a => "123" , b => "456" console.log(foo); // error (foo is not defined)

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

const obj = { name:"zhangsan", age:18 }; const {name, gender} = obj; console.log(name, gender); // name => "zhangsan", gender => undefined let person = { name:"lisi", age:17 }; let { gender } = person; // 声明一个变量，并解构赋值 console.log( person.gender ); // undefined => 当访问不存在的变量属性时，值为undefined gender = "male"; console.log( person.gender ); // undefined let {name, age} = person; name = "wangwu"; console.log(person.name); // name => "lisi" // 解构赋值的变量，不改变原对象（变量存放在栈中）

函数参数的解构赋值

let obj = { name:"zhangsan", age:18, eat(food="西瓜"){ // 设置默认值 console.log("我喜欢吃！"+food) } }; function foo({name="goomay",age=20}={}){ // 设置默认值，不传参时，默认解构空对象，而空对象中没有属性，变量使用自身的默认值 console.log("我是"+name+",今年"+age+"岁"); }; foo(obj); // 我是zhangsan,今年18岁 foo(); // 我是goomay,今年20岁

解构可以帮助你更方便快捷的访问对象属性和数组元素。

除了基本用法之外，数组解构还可以方便的交换变量，访问数组元素，做一些遵循不可变原则的操作。

被解构的值一定要包含一个迭代器（不只是数组和对象才可以结构）