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 相关文章推荐
用方法封装javascript的new操作符(一)
Dec 25 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 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中Object对象的笔记分享
2011/06/28 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
javascript一点特殊用法
2008/05/28 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python统计字符的个数代码实例
2020/02/07 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
物流管理专业求职信
2014/05/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Redis集群的关闭与重启操作
2021/07/07 Redis
python开发人人对战的五子棋小游戏
2022/05/02 Python