经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
ES6学习-5 解构赋值(2)对象的解构赋值
来源:cnblogs  作者:郭郭老师  时间:2021/5/31 9:08:22  对本文有异议

啥也不说,先举个栗子:

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

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

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

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

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

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

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

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

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

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

奇怪而有意思的用法:

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

 

原文链接:http://www.cnblogs.com/daguoguo/p/14806494.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号