在 ECMAScript 2019 中，我们可以在对象属性上使用 computed key，这是一项非常有用的功能，可以显著提高 JavaScript 编程的灵活性。在本文中，我们将详细介绍 computed key 的用法、意义，以及如何在实际项目中应用这项技术。
什么是 computed key
computed key 是 ECMAScript 2019 增加的一项功能，可以让我们在定义对象属性时使用一个表达式作为键名，从而创建高度动态的对象。以往 JavaScript 中，我们只能使用字面量方式定义对象的键名，如下：
const obj = {
name: 'Alice',
age: 18,
}而使用 computed key 后，我们可以使用方括号包含一组表达式作为键名，如下：
const key = 'name'
const obj = {
[key]: 'Alice',
age: 18,
}这里，我们定义的 key 变量可以是任意表达式，计算结果将作为属性名关联到对象上。
computed key 的意义
使用 computed key，我们可以更好地处理动态相关的属性创建、访问逻辑。这是因为 computed key 计算的结果不是在定义对象属性时就固定的，而是在对象实例化时才会被计算。因此，我们可以根据实际情况动态地去创建属性，并根据结果进行访问。相比于传统的对象定义方式，computed key 提供了更大的灵活性和自由度。
如何使用 computed key
在编写实际应用程序时，我们可以使用 computed key 为对象创造出更强大的动态能力，这里我们举一个例子。
假设我们有一个表单，其中包含某些输入组件和一个提交按钮。我们需要将表单中每个输入组件的值作为属性添加到对象中，并在提交按钮被单击时将整个对象提交到服务器。我们可以使用 computed key 完成这个过程：
-- -------------------- ---- ------- -- ---------- ----- ----------- - -------------------------------------------------------------- ------ -- - ------------------ - ----------- ------ ------ -- --- -- -- -------- --- ------ ----- -------- - - --------------- -- ------ ---------- --- --------------- --- ------- - -- ------------- --------------------
在这个例子中，我们使用 Array.reduce() 方法获取所有输入组件的值，并将这些值附加到 formData 对象上。使用 computed key，我们还可以为 formData 添加一个 submitTime 属性，该属性将包含当前时间的 Date 对象。最终，我们将 formData 对象提交给服务器，完成数据的提交。
结论
使用 computed key，我们可以大大提高 JavaScript 程序的灵活性和动态能力。这项技术尤其适用于需要动态计算属性名的场景，例如表单提交和数据处理等。希望这篇文章能够帮助您更好地理解 computed key 的用法，并能在实际项目中充分发挥其优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb91d044713626015ec015