迹忆客 专注技术分享

在 JavaScript 中有多种访问对象属性的方法。 但是两种常见的是点符号和括号符号。

我将在本文中解释这两种方法之间的区别。

使用点和括号表示法，我们可以：

1. 通过键访问属性的值
2. 通过其键修改现有属性的值和
3. 向对象添加新属性

但这两种方式访问属性的方式不同，并且存在一种比另一种更好的情况。

点符号属性访问器

点表示法方法涉及使用点或句点 . 和键来访问属性。 语法如下：

object.key

object 后面跟着点 .，然后是你想要访问的属性的键。 该表达式将返回属性的值。 让我们看一个例子：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj.name // 👉️ deeecode

通过使用点和名称键 .name，我们得到“deeecode”，这是名称属性的值。

我们还可以使用此表示法修改现有属性：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.age = 100

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 100,
  language: "javascript"
}

在这里，我们修改age属性。

此外，我们可以使用此方法添加新属性：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.location = "Mercury"

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 80,
  language: "javascript",
  location: "Mercury"
}

在这里，我们添加 location 属性。

但是这种方法有局限性，我们很快就会看到。 接下来，让我们了解括号表示法的工作原理。

括号表示法属性访问器

括号表示法方法涉及使用方括号，其中我们有一个计算结果为一个值的表达式。 该值用作访问属性的键。 语法如下：

object[expression]

括号内的表达式计算为我们要访问的属性的键，该表达式将返回属性的值。 让我们看一个例子：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj["name"]

console.log(target) // 👉️ deeecode

通过使用方括号和“name”字符串表达式，[“name”]，我们得到“deeecode”，这是 name 属性的值。

我们还可以使用此方法修改现有属性：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["age"] = 100

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 100,
  language: "javascript",
}

在这里，我们使用“age”字符串表达式修改 age 属性。

并且，我们可以使用方括号添加新属性：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["location"] = "Mercury"

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 80,
  language: "javascript",
  location: "Mercury"
}

在这里，我们使用“location”字符串表达式添加一个新的 location 属性。

括号表示法比点表示法具有更多功能。 我会解释。

点表示法和括号表示法属性访问器之间的差异

点表示法只允许静态键，而括号表示法接受动态键。 这里的静态键意味着键是直接键入的，而这里的动态键意味着键是从表达式求值的。

让我们看一些例子。

使用两种方法访问属性

从点符号开始：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj.myKey

这里的 target 的值为 undefined

在这里，我们将值“language”分配给 myKey 变量。 我在这里期望的是，当我使用点符号时，如 obj.myKey，“myKey”应该替换为“language”。 所以它会读作 obj.language 并且会返回“javascript”。

但事实并非如此。 相反，结果是 undefined 的。

这样做的原因是点表示法只接受静态键。 因此，当我们执行 obj.myKey 时，JavaScript 会在 obj 中查找具有键 myKey 的属性。 但是该属性不存在，所以我们得到 undefined。

另一方面，括号表示法允许动态键。 因为此表示法接受表达式，所以我们可以使用任何计算结果为某个值的表达式。 它可能是：

• hello + Hi 计算结果为 helloHi 作为键
• returnKey() 计算值作为键
• isTrue ? "trueKey" : "falseKey" 评估为 "trueKey" 或 "falseKey" 作为键
• 评估变量值作为键的变量

因此，使用前面的示例，我们可以得到：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj[myKey]
console.log(target) // 👉️ javascript

我们传递给方括号的表达式是 myKey，它是一个变量。 该表达式的计算结果为“language”，即变量的值。 使用这个值，方括号可以得到属性的值，也就是“javascript”。

但是如果你传递一个像“myKey”这样的字符串表达式，你会得到 undefined ：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj["myKey"] // 👉️ undefined

这是因为字符串表达式“myKey”的计算结果为值“myKey”，它用作访问属性的键。 由于 obj 上没有 myKey 键，因此返回值 undefined。

使用两种方法修改属性

从点符号开始：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj.myKey = 100

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 80,
  language: "javascript",
  myKey: 100
}

在这里，我们有 myKey 和“age”值。 通过尝试执行 obj.myKey = 100 来修改 age 属性，它不会起作用。 这是因为点表示法接受静态键。 所以 obj.myKey 将 myKey 作为键。 由于 mykey 不存在于 obj 中，因此该语句添加了键。 然后，obj 有一个新键，myKey，值为 100。

行为与括号表示法不同：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj[myKey] = 100

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 100,
  language: "javascript"
}

括号方法不是向 obj 添加新的 myKey 属性，而是修改 age 属性。 原因是，我们将 myKey 作为表达式传递给方括号。 这个表达式作为一个变量，计算结果为“age”，这是变量的值。 使用“age”作为键，此方法将 age 属性的值修改为 100。

如果我们想使用方括号添加新属性，那么我们可以传递一个返回不存在的新键的表达式。 例如：

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "location"

obj[myKey] = "Mercury"

console.log(obj)

结果如下 👇️

{
  name: "deeecode",
  age: 100,
  language: "javascript",
  location: "Mercury"
}

在这里，myKey 变量拥有一个新值：“location”。 通过将它传递给方括号，并分配一个值“Mercury”，我们现在有了一个包含键值对位置和“Mercury”的新属性。

我们应该使用点符号还是括号符号？

到目前为止，我们已经了解了每种符号的工作原理，使用不同的示例来访问/修改现有属性和添加新属性。 那么在编写 JavaScript 代码时应该使用哪个呢？

帮助大家做出决定的主要因素是要访问的属性的键。 如果它是静态键，请使用点表示法。 但如果它是一个动态键（在运行时从表达式求值），请使用括号表示法。

当我们提前知道属性时，点表示法很有用。 我们只需执行 object.key 即可读取/修改现有属性或添加新属性。

当我们想动态访问属性时，括号表示法很有用。 此属性的键可以来自 getKey()、“my”+“key” 或 keyVariable 等表达式。