ES6对象字面量三大新特性详解:属性简写、方法简写与计算属性名
本文详解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个新特性介绍完毕,大家可以回到文章开头检查一下自己是否掌握了本小结内容。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对本站的支持。
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
