资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6系列文章 对象字面量

ES6系列文章 对象字面量

snifes / 1810人阅读

摘要：使得声明对象字面量更加简单，提供了属性简写和方法简写功能，属性名计算的新特性。属性简写在及以前的版本中，对象字面量只支持键值对集合。实际业务中，对象字面量的初始化会有一定的代码重复。

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

</>复制代码 
  1. function getInfo(name, age, weight) {
  2.     return {
  3.         // 如果属性名和属性值同名可以利用、es6的属性简写
  4.         name,  // 等同于 make: make
  5.         age, // 等同于 model: model
  6.         weight, // 等同于 value: value
  7.         // ES6的属性名是可计算的
  8.         ["over" + weight]: true,
  9.         // 对象方法名简写可以省略 function 关键字
  10.         descripte() {
  11.             console.log(name, age, weight);
  12.         }
  13.     };
  14. }
  15. let person = getInfo("Kia", 27, 400);
  16. console.log(person);// {name: "Kia", age: 27, weight: 400, over400: true, descripte: ƒ}

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

属性简写

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

</>复制代码 
  1. //ES5
  2. function createPeople(name, age) {
  3.     return {
  4.         name: name,
  5.         age: age
  6.     };
  7. }

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

</>复制代码 
  1. function createPeople(name, age) {
  2.     return {
  3.         name,
  4.         age
  5.     };
  6. }
方法名简写

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

</>复制代码 
  1. var people = {
  2.     name: "xixi",
  3.     sayName: function () {
  4.         console.log(this.name);
  5.     }
  6. };

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

</>复制代码 
  1. let people = {
  2.     name: "xixi",
  3.     sayName() {
  4.         console.log(this.name);
  5.     }
  6. };
  7. people.sayName();// xixi
属性可计算 
</>复制代码 
  1. let lastName = "last name";
  2. let person = {
  3.     [lastName]: "yuan"
  4. };
  5. console.log(person[lastName]);// yuan
总结

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

refs

深入理解ES6
learning-es6-enhanced-object-literals

云服务器 GPU云服务器 字面量对象 对象javascript字面量 字面量 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88874.html

相关文章

  • 【重温基础】1.语法和数据类型

    摘要：语法和数据类型正文开始本章节复习的是中的基本语法，变量声明，数据类型和字面量。声明一个块作用域的局部变量，可赋一个初始值。变量声明有三种方式如，声明局部变量和全局变量。 最近开始把精力放在重新复习JavaScript的基础知识上面，不再太追求各种花枝招展的前端框架，框架再多，适合实际项目才是最重要。 上星期在掘金发布了几篇文章，其中最大块算是 【复习资料】ES6/ES7/ES8/ES...

    Darkgel 评论0 收藏0

  • ES6系列---对象功能扩展

    摘要：通过多种方式来加强对象的使用，通过简单的语法扩展，提供更多操作对象及与对象交互的方法。增强对象原型改变对象的原型正常情况下，无论是通过构造函数还是方法创建对象，其原型是在被创建时指定的。引用相当于指向对象原型的指针 ES6通过多种方式来加强对象的使用，通过简单的语法扩展，提供更多操作对象及与对象交互的方法。 对象字面量语法扩展 对象属性初始值的简写 ES5中初始化属性值的方式： fun...

    sarva 评论0 收藏0

  • [ ES6 ] 快速掌握常用 ES6 （二）

    摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0

  • 《深入理解ES6》笔记——字符串和正则表达式（2）

    摘要：本章主要讲个知识点，字符串正则表达式字符串字符串是大原始数据类型。提供的标准形式，接受一个可选的字符串参数，指明应用某种标准形式。如果在字符串中检测到指定文本，返回，否则。字符串内插入反撇号的方式。 相比较于第一章变量的声明，这一章的内容有了一点深度提升，但还不至于很难理解。本章主要讲2个知识点，字符串、正则表达式 字符串 字符串（String）是JavaScript6大原始数据类型。...

    guqiu 评论0 收藏0

发表评论

登陆后可评论

0条评论

snifes

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<