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);
  • 效果
相关推荐
前端极客探险家2 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端