Why do you need JavaScript Enhanced Object Literals?

为什么你需要 JavaScript 增强版对象字面量？

在 ES6 推出的增强对象字面量让编写对象时不再繁琐，字面量指的是代表它自己的数值，例如数字 25 或 你好世界，而增强对象字面量就是在对象中使用的值。

键缩写

const name = 'Joe';
const age = 21;

const person = {
  name: name,
  age: age,
};

在以上传统示例中，可以看到对象的键与变量名称相同，这时候就可以使用键缩写来简化写法：

const name = 'Joe';
const age = 21;

const person = {
  name,
  age,
};

它们的结果是一样的，但键缩写后更简洁可以避免重复，就是一个便利的缩写语法。

既然同名的键与属性可以使用缩写，那么函数也有对应的缩写语法吗？有的！

const person = {
  greeting: function () {
    console.log('Hi!');
  },
};

以上就是传统在对象中定义函数的写法，现在可以使用函数缩写来简化：

const person = {
  greeting() {
    console.log('Hi!');
  },
};

它们的结果是一模一样的，但函数缩写后更简洁可以避免重复，就是一个便利的缩写语法。要额外注意如果想在对象中创建箭头函数就不能使用上述写法，而要这样写：

const person = {
  greeting: () => {
    console.log('Hi!');
  },
};

关于一般函数与箭头函数仍有些许根本上的不同，详细可以参考我的另外一篇文章：为什么你需要箭头函数？

试想如果想要动态创建对象的键……你没办法！在计算属性出现之前只能先声明变量再改动对象键：

const person = {};
person['name'] = 'Joe';

但是现在可以使用计算属性来简化：

const key = 'name';
const value = 'Joe';

const person = {
  [key]: value,
};

{
  "name": "Joe"
}

这样就可以动态创建对象的键，如果声明的对象需要动态依靠变量来创建就是使用计算属性的好时机。