ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6学习-5 解构赋值(2)对象的解构赋值

2021-05-24 22:34:22  阅读:153  来源: 互联网

标签:ES6 myage console log 郭郭 myname 解构 赋值


啥也不说,先举个栗子:

1 let { myname, myage } = { myage: 18, myname: "郭郭" };
2 console.log(myname) //郭郭
3 console.log(myage) //18

很简单的例子,主要是为了说明对象解构赋值与数组解构赋值的不同。数组解构赋值时,变量是按次序排列的,变量的取值由它的位置决定;而对象解构赋值时,变量没有次序,变量名只要与属性同名,就才能取到正确的值。

那如果变量与对象的属性不同名,可以应用解构赋值吗?答案是肯定的,就是麻烦一点点,举栗子:

1 let {myage:youage,myname:youname}={ myage: 18, myname: "郭郭" };
2 console.log(youname) //郭郭
3 console.log(youage) //18

我们用对象的 myage 属性给 youage变量赋了值,用 myname 属性给 youname 赋了值,变量名与对象的属性名不一致时,可以 在变量的前边加上 "属性名:",用指定属性名来给变量赋值

同数组解构赋值一样,对象的解构赋值也可以设置默认值,不再多说,举几个简单的栗子吧:

1 let { myname, myage=16 } = {myname: "郭郭" };
2 console.log(myname) //郭郭
3 console.log(myage) //16 没有对应的属性,所以使用了默认值
4 
5 let { myname, myage=16 } = {myname: "郭郭",myage:39 };
6 console.log(myname) //郭郭
7 console.log(myage) //39 有对应的属性,所以默认值不起作用

已经声名的变量,应用解构赋值:

1 let myname,myage;
2 { myname, myage } = { myage: 18, myname: "郭郭" };  //报错啊,报错啊,why??
3 ({ myname, myage } = { myage: 18, myname: "郭郭" }) //外面加对括号就好了。

因为 JavaScript 引擎会将{...}理解成一个代码块,从而发生语法错误。只要不将大括号写在行首,避免 JavaScript 将其解释为代码块,就能解决这个问题

奇怪而有意思的用法:

1 const { log } = console; //把console 对象的 log 方法解构给 log变量。
2 log('hello') // 相当于调用了 console.log 控制台会输出hello

 

标签:ES6,myage,console,log,郭郭,myname,解构,赋值
来源: https://www.cnblogs.com/daguoguo/p/14806494.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有