ES6-对象的扩展-属性名表达式
2017-11-17 14:19
465 查看
JavaScript 定义对象的属性,有两种方法。
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
var obj = {
foo: true,
abc: 123
};ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"表达式还可以用于定义方法名。
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi注意,属性名表达式与简洁表示法,不能同时使用,会报错。
// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串 [object Object],这一点要特别小心。
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
var obj = {
foo: true,
abc: 123
};ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"表达式还可以用于定义方法名。
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi注意,属性名表达式与简洁表示法,不能同时使用,会报错。
// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串 [object Object],这一点要特别小心。
const keyA = {a: 1}; const keyB = {b: 2}; const myObject = { [keyA]: 'valueA', [keyB]: 'valueB' }; myObject // Object {[object Object]: "valueB"}上面代码中,[keyA] 和 [keyB] 得到的都是 [object Object],所以 [keyB] 会把 [keyA] 覆盖掉,而 myObject 最后只有一个 [object Object] 属性。
相关文章推荐
- ES6中 用表达式作为 对象属性名的语法糖
- ES6-对象的扩展-_proto_ 属性,Object.setPrototypeOf(),Object.getProtitypeOf()
- ES6-对象的扩展-属性的可枚举性和遍历
- SQLServer在数据库对象上使用扩展属性
- es6 对象的扩展
- ES6正则表达式扩展
- ES6之6种遍历对象属性的方法
- js正则表达式之RegExp对象属性lastIndex,lastMatch,lastParen,lastContext,rightContext属性讲解
- 3、步步为营VS 2008 + .NET 3.5(3) - C# 3.0新特性之Automatic Properties(自动属性)、Object Initializers(对象初始化器)、Collection Initializers(集合初始化器)和Extension Methods(扩展方法)
- ES6 --- 对象扩展
- [js高手之路] es6系列教程 - 对象功能扩展详解
- javascript中面向对象中对象,属性,原型链和一些扩展知识总结
- ES6学习教程之对象的扩展详解
- es6 javascript对象的扩展运算符
- ES6-对象的扩展-Object.getOwnPropertyDescriptors()
- ES6--对象、函数的扩展
- js对象根据属性名表达式解析成新的对象
- Lamda表达式,map快速获取对象的某一个属性生成集合
- 关于数据库对象的扩展属性
- ES6入门之对象扩展