一、区别一下数组的解构赋值

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

二、说明

- 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。
- 真正被赋值的是后者，而不是前者。
- 前者主要是用于匹配

• 示例

      let obj = {name: "wyt",age: 18,};let { name: myname } = obj;console.log("name:" + name);console.log("myname:" + myname);//上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo

• 效果
  
• 解惑

大家可能会有疑惑
- 问题：为什么值（字符串wyt）被赋值给了myname而非name
- 答案：此处name仅仅是匹配模式，myname才是变量即真正被赋值的是变量myname而非name

三、示例

1）简单的完整解构赋值

• 示例

      let obj = {name: "wyt",age: 18,};let { name, age } = obj;console.log("name:" + name);console.log("age:" + age);

• 效果
  
• 完整的代码

      let obj = {name: "wyt",age: 18,};let { name: name, age: age } = obj;//前者name是匹配模式，后者name是真正被赋值的变量console.log("name:" + name);console.log("age:" + age);

2）简单的部分解构赋值（即按需解构）

• 示例

      let obj = {name: "wyt",age: 18,};let { name: name, age: age } = obj;console.log("age:" + age);

• 效果
  

3)过度解构

一般未匹配到的变量常常被赋值为undefined

• 示例

      let obj = {name: "wyt",age: 18,};//会发现obj中并没有school属性let { name, age, school } = obj;console.log("obj：name" + name + ",age=" + age + ",school=" + school);

• 效果
  

4）复杂的完整解构

• 示例

      let stus_obj = {stu_1: {name: "wyt",age: 18,},stu_2: {name: "wyh",age: 15,},};let {stu_1: { name: name1, age: age1 },stu_2: { name: name2, age: age2 },} = stus_obj;console.log("stu_1:name=" + name1 + ",age=" + age2);console.log("stu_2:name=" + name2 + ",age=" + age2);

• 效果
  
• 疑惑

- 大家可能会好奇两个问题
- 问题一：语句let {stu_1: { name: name1, age: age1 },stu_2: { name: name2, age: age2 },} = stus_obj;中的stu_1,stu_2是否被赋值
- 答案：这里的stu_1,stu_2未被赋值，这里仅仅用于匹配
- 问题二：为什么上面的语句不可以写成语句let {stu_1: { name, age },stu_2: { name, age },} = stus_obj;
- 答案：Cannot redeclare block-scoped variable 'name'和'age'

• 解惑（如何获取stu_1和stu_2）

      let stus_obj = {stu_1: {name: "wyt",age: 18,},stu_2: {name: "wyh",age: 15,},};let {stu_1,stu_2,stu_1: { name: name1, age: age1 },stu_2: { name: name2, age: age2 },} = stus_obj;console.log(stu_1);console.log("stu_1:name=" + name1 + ",age=" + age2);console.log(stu_2);console.log("stu_2:name=" + name2 + ",age=" + age2);

5）剩余运算符

• 示例

      let obj = {name: "wyt",age: 18,school: "七中",};//即将对象obj内的除了name以外的属性组件成一个新对象let { name, ...rest } = obj;console.log("name:" + name);console.log(rest);

• 效果
  

6）赋予默认值

• 示例

      let obj = {name: "wyt",age: 18,};//此时的school被赋予了默认值七中，当school未匹配到时或者值为undefined时值为七中let { name, age, school = "七中" } = obj;console.log("name:" + name);console.log("age:" + age);console.log("school:" + school);

• 效果
  

四、应用

1）常用于解构对象中的方法

// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello//例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。
//例二将console.log赋值到log变量。

2）常用于解构JSON对象里面所需的属性

      let jsonData = {id: 42,status: "OK",data: [867, 5309],};//此时仅仅需要id和data属性的值let { id, data } = jsonData;console.log("id:" + id);console.log("data:");console.log(data);

• 效果