前言
写 JS 的时候，我们经常会定义对象用来承载一组相关数据。在 ES6 之前，对象字面量写法比较啰嗦，键名和变量名一样的时候也要重复写两遍；函数作为对象方法，也要完整写 key: function(){}。
ES6 为对象字面量新增了几套简写语法，属性简写、方法简写、计算属性名，日常开发高频使用，代码更简洁清爽。 很多同学会混用，有时候分不清什么时候能用简写、有哪些隐性坑，本篇把规则、示例、注意点一次性整理清楚。
阅读前提：掌握基础对象字面量写法，适合刚学完 JS 基础、正在学习 ES6 新特性的同学。
一、属性简写（变量同名简写）
旧写法（ES5）
当对象的 key 名称，和外面传入的变量名称完全一致时，我们需要重复书写：
let name = "小明";
let age = 20;
let user = {
name: name,
age: age
};
console.log(user);
键名和变量名一模一样，重复写就很冗余。
ES6 简写规则
如果 属性名 = 变量名，可以只写变量名，自动把变量名当做 key，变量值当做属性值。
let name = "小明";
let age = 20;
let user = {
name,
age
};
console.log(user);
// { name: '小明', age: 20 }
多条属性可以一起简写，混写普通属性也没问题：
let name = "小明";
let age = 20;
let user = {
name,
age,
gender: "男" // 普通属性照常写
};
重点规则：名字必须完全一致
let username = "小明";
let user = {
name // ❌ 变量叫 username，key 叫 name，名称不一样，不能简写
}
速记口诀：同名才简写，不同名老老实实
key: value
二、对象方法简写
ES5 旧写法
对象里面放函数方法，标准写法：
let user = {
sayHi: function () {
console.log("你好");
}
};
user.sayHi();
ES6 简写规则
可以省略 : function，直接 方法名() {}
let user = {
sayHi() {
console.log("你好");
}
};
user.sayHi();
支持传参，和普通函数一样：
let user = {
sayHi(msg) {
console.log("消息：", msg);
}
};
user.sayHi("hello");
和属性简写混合使用：
let name = "小明";
let user = {
name,
sayHi() {
console.log(`我是${this.name}`);
}
};
user.sayHi();
这个简写方法的 this 指向
这种简写出来的函数，依然是普通 function，不是箭头函数 this 和传统写法保持一致：指向调用它的对象。
误区：不要和箭头函数搞混
let user = {
sayHi: () => {
console.log(this.name); // this 指向外层，不是 user 对象！不推荐对象方法用箭头函数
}
}
速记口诀：方法简写省
:function，this 不变，别换成箭头函数
三、计算属性名（动态 key）
这个很多人会和上面两个简写搞混，它也是 ES6 对象字面量新特性。 需求：key 不是固定字符串，需要用变量 / 表达式动态计算出来。
ES5 怎么实现动态 key
ES5 字面量里 key 只能写固定字符串，动态属性只能写完对象之后再赋值：
let keyName = "userId";
let user = {};
user[keyName] = 1001;
ES6 规则：[表达式] 作为属性名
在字面量内部直接用方括号包裹表达式，表达式运行结果作为 key：
let keyName = "userId";
let user = {
[keyName]: 1001
};
console.log(user); // { userId: 1001 }
方括号里面可以写任意合法表达式：
let type = "info";
let user = {
[`${type}_name`]: "小明",
[10 + 20]: "计算出来的key"
};
console.log(user);
// { info_name: '小明', 30: '计算出来的key' }
组合使用：计算属性 + 方法简写
let methodKey = "say";
let user = {
[methodKey]() {
console.log("hello");
}
};
user.say();
速记口诀：固定 key 直接写，动态 key 加
[]
四、混合写法综合示例
把三种特性放一起看，这是项目里最常见的写法：
let title = "ES6";
let count = 99;
let fnKey = "print";
let demo = {
title, // 属性简写
count, // 属性简写
[fnKey]() { // 计算属性名 + 方法简写
console.log(this.title, this.count);
}
};
demo.print();
五、高频踩坑点汇总
- 属性简写只能读取变量，不能直接修改 简写只是语法糖，等价于
title: title，不是双向绑定。外面变量修改，对象的值不会自动同步。
let a = 1;
let obj = { a };
a = 100;
console.log(obj.a); // 仍然是 1
- 简写属性不能单独重新赋值 简写只是创建对象时的语法，后续修改属性，还是正常
obj.name = "xxx"。 - 计算属性
[]里面的表达式会立即执行 字面量定义的时候就计算 key，不是延迟执行。 - 方法简写不能用作构造函数 简写方法没有
prototype，不能 new。
let obj = {
fn() {}
};
new obj.fn(); // 报错
- 同名属性覆盖问题 不管是不是简写，同一个对象字面量出现相同 key，后面覆盖前面：
let name = "小红";
let obj = {
name,
name: "小明"
};
console.log(obj.name); // 小明
六、总结
ES6 对象字面量三大简写规则回顾：
- 属性简写：key 和外部变量同名，只写变量名
{ name } - 方法简写：对象内函数省略
: function，say(){} - 计算属性名：动态 key 使用
[表达式]
本质上全部都是语法糖，底层没有新增能力，只是简化代码书写。 在日常开发、接口返回组装、参数封装、解构搭配的时候，这套语法出镜率极高，熟练之后代码可读性会高很多。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2603_95923710/article/details/170016133
