迹忆客 专注技术分享

在 ES6 之前声明对象时，我们必须对属性使用静态键。 但是自从 ES6 发布后，就可以使用动态键了。

我将在本文中向大家展示它们的工作原理。

什么是静态和动态键？

静态键是什么意思？ 看看这个对象：

const obj = {
  name: "Tom",
  age: 1000,
}

可以看到 name 和 age 是静态键。 它们不是来自任何地方——它们不是计算的（计算的）。 这些键直接添加到对象中。

如果你想添加一个动态密钥怎么办？ 这里的动态键是指表达式的结果。 例如，动态键可以是变量或计算值。

我将在本文中向大家展示如何做到这一点。

计算属性名称功能

ES6 中的计算属性名称功能允许我们动态设置属性名称——也就是说，属性名称将是计算为一个值的表达式。

此功能对于我们事先不知道的属性名称很有用。 对于像“name”这样的属性名称，你已经知道了，所以你可以像这样创建你的对象：

const object = {
  name: value
}  

但是来自运行时执行的表达式的属性名呢？ 这样的表达式可以是连接、函数调用或条件表达式，仅举几例。

在这种情况下，我们无法提前知道属性名称。 这就是我们使用计算属性名称功能的地方。

要为属性名称使用计算值，我们可以使用方括号并传递表达式。

语法如下：

const object = {
  [expression]: value
}

如何将变量设置为属性名称

让我们看一个变量示例：

const key1 = "language"
const key2 = "isStudent"

const obj = {
  name: "Tom",
  age: 1000,
  [key1]: "javascript",
  [key2]: true
}

console.log(obj)

结果如下 👇️

{
  name: "Tom",
  age: 1000,
  language: "javascript",
  isStudent: true
}

正如我们在此示例中所见，name 和 age 是直接添加的，作为静态键。 但是，language 和 isStudent 没有作为静态键添加。 它们是动态添加的，作为变量表达式：[key1] 和 [key2] 。 表达式的返回值然后表示将添加到对象的键。

这只是一个显示变量表达式的示例。 正如我所说，我们可以使用不同形式的表达式来返回值。

让我们看另一个表达式示例。

如何将条件表达式设置为属性名称

使用条件运算符创建的条件表达式允许我们定义条件。 如果条件为真，则返回某个值，如果为假，则返回另一个值。

让我们看一个使用条件表达式作为属性名称的示例：

const age = 10

const key1 = "ageIsMoreThan5"
const key2 = "ageIsMoreThan10"

const obj = {
  name: "Tom",
  [age > 10 ? key2 : key1]: true
}

console.log(obj)

结果如下 👇️

{
  name: "Tom",
  ageIsMoreThan5: true
}

在这里，我们有一个 age 变量，它的数值为 10。

在对象 obj 中，我们有一个条件表达式：age > 10 ? key2 : key1 。 此表达式表明，如果 age 变量的值大于 10，则返回 key2，否则返回 key1。

因为10（ age 的值）不大于10，所以返回 key2。 key2 变量的值为 ageIsMoreThan5。

如果 age 是 20，则向 obj 添加一个不同的属性键：

const age = 20

const key1 = "ageIsMoreThan5"
const key2 = "ageIsMoreThan10"

const obj = {
  name: "Tom",
  [age > 10 ? key2 : key1]: true
}

console.log(obj)

结果如下 👇️

{
  name: "Tom",
  ageIsMoreThan10: true
}

正如大家在此处看到的，条件表达式被评估为 key2，因为 age > 10 返回 true。 key2 的值为“ageIsMoreThan10”，因此这是添加到对象的属性。

总结

在本文中，我们向大家展示了 JavaScript 中的计算属性名称支持如何在声明对象时添加动态键。

大家可以想到任何返回值的表达式。 这样的表达式可以用在括号中，作为对象中的属性键。

我们还可以使用此功能访问/修改现有属性或添加新属性。 可以在我们关于对象属性的点表示法和括号表示法的文章中了解更多相关信息。