对象字面量的华丽变身：从啰嗦到简洁的魔法
各位看官，今天咱们聊聊JavaScript里一个非常基础，但又经常被忽略的小可爱——对象字面量。 别看它名字听着学术，其实就是我们平时用来创建对象的那种花括号 {}。 想象一下，你要描述一只猫：
const myCat = {
name: "咪咪",
color: "橘色",
age: 3,
meow: function() {
console.log("喵喵喵！");
}
};这没毛病，很清晰，也很直接。 但是，如果你每天都要创建一堆猫，或者其他类似的对象，你会不会觉得有点点…重复？ 尤其是在属性名和变量名相同的时候，那种重复感简直让人想挠墙。
好消息是，ES6（ECMAScript 2015）带来了对象字面量的增强，就像给它施了个魔法，让它变得更简洁、更强大。 今天，咱们就来扒一扒这个魔法的底裤，看看它到底是怎么运作的。
属性简写：告别冗余，拥抱简洁
首先，我们来解决那个让人挠墙的重复问题。 想象一下，你已经有一个变量 name 存着猫的名字，然后你想用这个变量来创建猫对象。 以前，你得这么写：
const name = "小黑";
const myCat = {
name: name, // 重复啊重复
color: "黑色"
};看到没？ name: name 简直是多余到家了。 就像你跟别人说：“我的名字是，我的名字”，听着都尴尬。
ES6 拯救了我们！ 它可以让你直接把变量名当做属性名，省去那个恼人的 name:：
const name = "小黑";
const myCat = {
name, // 简洁明了！
color: "黑色"
};是不是感觉世界都清净了？ 这就像是你突然发现你的钱包里多了一张一百块，虽然不多，但就是让人心情愉悦。
这种简写方式适用于任何变量，只要你的变量名和你想创建的属性名相同，就可以直接使用。 比如：
const name = "小白";
const age = 2;
const color = "白色";
const myCat = {
name,
age,
color,
meow: function() {
console.log("喵喵喵！");
}
};简直是代码界的 “断舍离”，把不必要的冗余统统扔掉，只留下最精华的部分。
方法定义新语法：告别 function，拥抱优雅
除了属性简写，ES6 还给对象字面量的方法定义带来了新语法。 以前，我们定义一个方法是这样的：
const myCat = {
name: "小黄",
meow: function() {
console.log("喵喵喵！");
},
eat: function(food) {
console.log(`正在吃 ${food}`);
}
};function 关键字总是那么显眼，就像一个穿着西装革履的人出现在海滩上，显得格格不入。
ES6 告诉我们，我们可以直接省略 function 关键字，让方法定义更简洁：
const myCat = {
name: "小黄",
meow() {
console.log("喵喵喵！");
},
eat(food) {
console.log(`正在吃 ${food}`);
}
};看到了吗？ 直接把方法名和括号放在一起，就像一个亲密的拥抱，简洁又优雅。 这种写法更符合我们对方法的直觉，读起来也更流畅。
而且，这种新语法还支持 super 关键字，让我们在继承和原型链操作中更加方便。 这个我们后面再细说。
计算属性名：让属性名不再是“死脑筋”
除了简洁，ES6 还给对象字面量带来了更大的灵活性——计算属性名。 以前，我们定义属性名都是写死的，就像刻在石头上一样，无法更改。 但是，有时候我们需要根据变量或者表达式来动态生成属性名，这时候就有点抓瞎了。
比如，你想根据用户的输入来创建一个对象，属性名就是用户输入的内容。 以前，你可能得这样写：
const userInput = "age";
const myObject = {};
myObject[userInput] = 18; // 必须先创建空对象，再动态添加属性这种写法虽然能实现功能，但是总感觉有点笨拙，不够优雅。
ES6 允许我们直接在对象字面量中使用方括号 [] 来包裹表达式，计算出属性名：
const userInput = "age";
const myObject = {
[userInput]: 18, // 直接在对象字面量中动态生成属性名
["user" + "Name"]: "张三" // 表达式也可以
};
console.log(myObject.age); // 18
console.log(myObject.userName); // 张三是不是感觉像打开了新世界的大门？ 你可以使用任何表达式来计算属性名，包括变量、函数调用、甚至复杂的逻辑运算。 这让对象字面量变得更加灵活，可以应对各种复杂的场景。
举个更实际的例子，假设你要根据不同的语言环境来显示不同的文本：
const language = "en";
const translations = {
[language === "en" ? "greeting" : "salutation"]: "Hello",
[language === "zh" ? "greeting" : "salutation"]: "你好"
};
console.log(translations.greeting); // 如果 language 是 "en"，输出 "Hello"
console.log(translations.salutation); // 如果 language 是 "zh"，输出 "你好"这种写法是不是很巧妙？ 它根据 language 的值来动态选择属性名，避免了繁琐的 if...else 判断。
super 关键字：让继承更简单
前面提到，新的方法定义语法支持 super 关键字。 super 关键字可以让我们在子类中访问父类的方法，实现继承。
假设我们有一个 Animal 类：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log("动物发出声音");
}
}然后我们创建一个 Cat 类，继承自 Animal 类：
class Cat extends Animal {
constructor(name) {
super(name); // 调用父类的 constructor
}
speak() {
super.speak(); // 调用父类的 speak 方法
console.log("喵喵喵！");
}
}
const myCat = new Cat("咪咪");
myCat.speak(); // 输出 "动物发出声音" 和 "喵喵喵！"在 Cat 类的 speak 方法中，我们使用 super.speak() 来调用父类 Animal 的 speak 方法，然后再输出 "喵喵喵！"。 这实现了对父类方法的扩展，而不是完全覆盖。
现在，我们用对象字面量来模拟一下这个过程：
const animal = {
name: "动物",
speak() {
console.log("动物发出声音");
}
};
const cat = {
name: "猫",
__proto__: animal, // 设置原型链，模拟继承
speak() {
super.speak(); // 使用 super 关键字访问原型链上的方法
console.log("喵喵喵！");
}
};
cat.speak(); // 输出 "动物发出声音" 和 "喵喵喵！"注意，这里我们使用了 __proto__ 属性来设置原型链，模拟继承。 虽然 __proto__ 属性在某些情况下不推荐使用，但是在这里它可以帮助我们理解 super 关键字的用法。
可以看到，即使是在对象字面量中，super 关键字也能正常工作，让我们在原型链上自由穿梭，访问父类的方法。
总结：对象字面量的华丽升级
ES6 带来的对象字面量增强，就像给这个基础的语法特性注入了新的活力，让它变得更加简洁、灵活、强大。
- 属性简写： 告别冗余，让代码更清爽。
- 方法定义新语法： 告别
function，让方法定义更优雅。 - 计算属性名： 让属性名不再是“死脑筋”，可以动态生成。
super关键字： 让继承更简单，方便访问父类方法。
这些增强特性，不仅可以提高我们的开发效率，还可以让我们的代码更易读、更易维护。 所以，赶快用起来吧，让你的对象字面量也来一次华丽的升级！
最后，希望这篇文章能帮助你更好地理解 ES6 的对象字面量增强。 记住，学习编程就像学习魔法，只要掌握了正确的咒语，就能创造出令人惊叹的效果。 祝你编程愉快！