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 相关文章推荐
浅说js变量
May 25 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
简单采集了yahoo的一些数据
2007/02/14 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
基于javascript制作微信聊天面板
2020/08/09 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现定时任务
2017/02/08 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
pandas apply多线程实现代码
2020/08/17 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
HTML5等待加载动画效果
2017/07/27 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL