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 DIV弹出效果实现代码
Jul 03 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python中join和split用法实例
2015/04/14 Python
Python中关于使用模块的基础知识
2015/05/24 Python
python unittest实现api自动化测试
2018/04/04 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
优秀学生干部推荐材料
2014/02/03 职场文书
企业总经理岗位职责
2014/02/13 职场文书
公司请假条范文
2014/04/11 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
环保标语大全
2014/06/12 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript