1. 属性值简写
- 给对象添加属性，常常属性名和变量名是一样的
let name = 'YK菌';
let person = {
name: name;
};
console.log(person); // { name: 'YK菌' }
- 对象的属性值（name:name）可以简写成以下形式（name）
let name = 'YK菌';
let person = {
name;
};
console.log(person); // { name: 'YK菌' }
2. 可计算属性
之前，不能在对象字面量中直接动态命名属性（变量的值作为属性）
const nameKey = 'name';
const ageKey = 'age';
const jobKey = 'job';
let person = {
};
person[nameKey] = 'YK菌';
person[ageKey] = 18;
person[jobKey] = 'Student';
console.log(perosn); // {name: 'YK菌', age: 18, job: 'Student' }
有了可计算属性，就可以在对象字面量中完成动态属性赋值
const nameKey = 'name';
const ageKey = 'age';
const jobKey = 'job';
let person = {
[nameKey] = 'YK菌'; //[]里面的内容作为表达式而不是字符串解析
[ageKey] = 18;
[jobKey] = 'Student';
};
console.log(perosn); // {name: 'YK菌', age: 18, job: 'Student' }
还可以是更复杂的表达式
const nameKey = 'name';
const ageKey = 'age';
const jobKey = 'job';
let uniqueToken = 0;
function getUniqueKey(key){
return '${
key}_${
uniqueToken++;
}
let person = {
[getUniqueKey(nameKey)] = 'YK菌'; //[]里面的内容作为表达式而不是字符串解析
[getUniqueKey(ageKey)] = 18;
[getUniqueKey(jobKey)] = 'Student';
};
console.log(perosn); // {name_0: 'YK菌', age_1: 18, job_2: 'Student' }
3. 方法名简写
之前的完整写法
let person = {
sayName: function(name){
alert('我是 ${name} ！');
};
person.sayName('YK菌'); //我是YK菌
方法名可以省略 :function
let person = {
sayName(name){
alert('我是 ${name} ！');
};
person.sayName('YK菌'); //我是YK菌
4. 简写方法名和计算属性相互兼容
const methodKey = 'sayName';
let person = {
[methodKey](name){
alert('我是 ${name} ！');
};
person.sayName('YK菌'); //我是YK菌
参考资料
- JavaScript高级程序设计(第四版)P213-216 https://www.ituring.com.cn/book/2472