ES6学习教程之对象字面量详解


Posted in Javascript onOctober 09, 2017

前言

本文主要给大家介绍了关于ES6对象字面量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

ECMAScript6使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计算的新特性。

function getInfo(name, age, weight) {
 return {
  // 如果属性名和属性值同名可以利用、es6的属性简写
  name, // 等同于 make: make
  age, // 等同于 model: model
  weight, // 等同于 value: value

  // ES6的属性名是可计算的
  ['over' + weight]: true,

  // 对象方法名简写可以省略 function 关键字
  descripte() {
   console.log(name, age, weight);
  }
 };
}

let person = getInfo('Kia', 27, 400);
console.log(person);// {name: "Kia", age: 27, weight: 400, over400: true, descripte: ƒ}

如果可以理解上述三个新特性,可以不必往下阅读。下面的文字仅提供给还有疑问的朋友。

属性简写

在 ES5及以前的版本中,对象字面量只支持键值对集合。实际业务中,对象字面量的初始化会有一定的代码重复。

//ES5
function createPeople(name, age) {
 return {
  name: name,
  age: age
 };
}

createPeople函数用来创建一个People的对象,可以看到上面的代码的 name和age分别书写了两次,有些麻烦。在ES6中通过使用属性简写特性可以消除这种属性名称和局部变量之间的重复书写,当对象的属性和变量同名时,可以不必再写冒号和值。

function createPeople(name, age) {
 return {
  name,
  age
 };
}

方法名简写

ES5中若为对象添加方法必须指定方法名称,并完整地定义函数来实现。

var people = {
 name: 'xixi',
 sayName: function () {
  console.log(this.name);
 }
};

ES6的语法更简洁,消除了冒号和方法名。

let people = {
 name: 'xixi',
 sayName() {
  console.log(this.name);
 }
};
people.sayName();// xixi

属性可计算

let lastName = 'last name';
let person = {
 [lastName]: 'yuan'
};
console.log(person[lastName]);// yuan

总结

对象字面量扩展的3个新特性介绍完毕,大家可以回到文章开头检查一下自己是否掌握了本小结内容。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
AngularJS中的路由使用及实现代码
Oct 09 #Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 #Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 #Javascript
JS实现的全排列组合算法示例
Oct 09 #Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 #Javascript
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
js用类封装pop弹窗组件
Oct 08 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
js 幻灯片的实现
2011/12/06 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现可自定义大小的截屏功能
2018/01/20 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
美国在线珠宝商店:SZUL
2017/02/11 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
投资合作协议书范本
2014/04/17 职场文书
投资协议书范本
2014/04/21 职场文书
新学期开学标语
2014/06/30 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
公司授权委托书
2014/10/17 职场文书
教师工作表现评语
2014/12/31 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL