ES6-对象的解构赋值

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

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

二、说明

java 复制代码
- 对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。
- 真正被赋值的是后者,而不是前者。
- 前者主要是用于匹配
  • 示例
js 复制代码
      let obj = {
        name: "wyt",
        age: 18,
      };
      let { name: myname } = obj;
      console.log("name:" + name);
      console.log("myname:" + myname);

//上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo
  • 效果
  • 解惑
java 复制代码
大家可能会有疑惑
- 问题:为什么值(字符串wyt)被赋值给了myname而非name
- 答案:此处name仅仅是匹配模式,myname才是变量
		即真正被赋值的是变量myname而非name

三、示例

1)简单的完整解构赋值

  • 示例
js 复制代码
      let obj = {
        name: "wyt",
        age: 18,
      };
      let { name, age } = obj;
      console.log("name:" + name);
      console.log("age:" + age);
  • 效果
  • 完整的代码
js 复制代码
      let obj = {
        name: "wyt",
        age: 18,
      };
      let { name: name, age: age } = obj;
      //前者name是匹配模式,后者name是真正被赋值的变量
      console.log("name:" + name);
      console.log("age:" + age);

2)简单的部分解构赋值(即按需解构)

  • 示例
js 复制代码
      let obj = {
        name: "wyt",
        age: 18,
      };
      let { name: name, age: age } = obj;
      console.log("age:" + age);
  • 效果

3)过度解构

一般未匹配到的变量常常被赋值为undefined
  • 示例
js 复制代码
      let obj = {
        name: "wyt",
        age: 18,
      };
      //会发现obj中并没有school属性
      let { name, age, school } = obj;
      console.log("obj:name" + name + ",age=" + age + ",school=" + school);
  • 效果

4)复杂的完整解构

  • 示例
js 复制代码
      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);
  • 效果
  • 疑惑
js 复制代码
- 大家可能会好奇两个问题
- 问题一:语句
 	  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)
js 复制代码
      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)剩余运算符

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

6)赋予默认值

  • 示例
js 复制代码
      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)常用于解构对象中的方法

js 复制代码
// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello

//例一将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
//例二将console.log赋值到log变量。

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

js 复制代码
      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);
  • 效果
相关推荐
Tiffany_Ho4 分钟前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ1 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记2 小时前
【复习】HTML常用标签<table>
前端·html
john_hjy2 小时前
11. 异步编程
运维·服务器·javascript
风清扬_jd2 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
丁总学Java2 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele3 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
It'sMyGo3 小时前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式