本文详解ES6对象字面量的三大扩展特性：属性简写消除键值重复，方法简写省略function关键字，以及计算属性名支持动态键名。通过ES5与ES6代码对比，清晰展示语法简化过程，帮助开发者提升代码简洁性与可读性。
ES6对象字面量新特性概述
前言
本文主要介绍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的语法更加简洁，直接消除了冒号和方法名后的function关键字。
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个新特性介绍完毕，大家可以回到文章开头检查一下自己是否掌握了本小结内容。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。