ES6 中三种方式定义对象属性
ES6 中三种方式定义对象属性
重复样本代码让开发者很不爽,代码混乱掩盖了重要业务代码。ES6关注并解决一些重复的代码方式,使代码简洁、逻辑清晰,如数组解构、对象解构、箭头函数等。本文我们主要介绍利用三种方式在初始化对象时定义属性。
1. 属性简写
属性简写即删除重复表达。这里定义两个变量:
const name = "Luke";
const age = 24;
1
2
现在把这两个变量赋值给对象相同名称的属性,这时正常的表达为:
{
name: name,
age: age
}
1
2
3
4
这里重复的名称显得多余,对的,ES6允许我们采用简洁的方式表达:
{
name,
age
}
1
2
3
4
这里简单通过name代替name:name,JavaScript理解你想把name的值赋值给相同名称的属性。
2. 方法属性
另一个受欢迎的用法是定义方法,即通过给对象属性赋值函数来实现。为了简单,我们创建连个getter函数获取name和age属性:
{
getName: function() { return "Luke" },
getAge: function() {return 24 }
}
1
2
3
4
同样这种方案也很冗长,同样ES6提供了语法糖让代码简洁:
{
getName() { return "Luke" },
getAge() {return 24 }
}
1
2
3
4
3. 计算属性的名称
最后我们看通过评估表达式确定计算属性名称的情况。
这里定义函数getLo,简单返回字符串‘lo’。
var getLo = () => "lo"
1
现在通过合并字符串定义对象属性,字符串为“hel”连接调用getLo()的返回值,其结果为"hello".
在ES6之前,需要两步才能实现,首先初始化对象,然后使用方括号在对象中创建属性。
var obj = {};
obj[ "hel" + getLo() ] = "world";
1
2
这不算太坏,但使用ES6可以直接一步完成。
let obj2 = {
[ "hel" + getLo() ]: "world"
}
1
2
3
4. 总结
本文介绍ES6提供三种方式定义属性让代码更简洁。
————————————————
版权声明:本文为CSDN博主「梦想画家」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/neweastsun/article/details/103746344
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· DeepSeek “源神”启动!「GitHub 热点速览」
· 上周热点回顾(2.17-2.23)