在 JavaScript 中，字典（也称为对象）是一种重要的数据结构。它允许我们将数据存储为键-值对。然而，在使用字典时，你可能会遇到一个常见问题：当你尝试使用变量作为键时，它们最终会被解释为字符串，并成为该字符串的键。这篇文章将向你介绍如何使用中括号符号来解决这个问题。
问题的来源
考虑以下代码：
const key = "name";
const obj = {};
obj.key = "John Doe";
console.log(obj); // 输出: { key: 'John Doe' }我们期望输出结果为 { name: 'John Doe' }，因为我们将 key 变量设置为 "name"。但实际上，JavaScript 将 key 解释为字符串，并将其用作键，导致输出结果为 { key: 'John Doe' }。
解决方法
为了使用变量作为键，我们需要使用中括号符号 ([])，而不是点 (.) 来访问对象属性。这样做可以告诉 JavaScript 解释器，我们想要使用变量的值作为键。
const key = "name";
const obj = {};
obj[key] = "John Doe";
console.log(obj); // 输出: { name: 'John Doe' }在这个例子中，我们使用 obj[key] 来设置对象的属性。这将解释为 obj["name"]，其中 "name" 是变量 key 的值。所以输出结果为 { name: 'John Doe' }。
深度解析
在 JavaScript 中，对象属性可以通过两种方式访问：点符号 (.) 和中括号符号 ([])。
const obj = { foo: "bar" };
console.log(obj.foo); // 输出: "bar"
console.log(obj["foo"]); // 输出: "bar"点符号是一种简短且易于阅读的语法，适用于已知属性名称的情况。然而，它不能用于动态计算属性名称，例如使用变量作为属性名称。
中括号符号允许我们动态计算属性名称，并且可以接受任何表达式作为其参数。这使得它成为使用变量作为键的理想选择。
例如，以下代码使用一个包含动态计算属性名称的表达式来创建一个新的对象：
-- -------------------- ---- ------- ----- ---- - ------- ----- ---- - ------ ----- ------ - - ------- ----- ----- ------- -- -- -------------------- -- --- - ----- ----- ----- ---- -- -
在这个例子中，我们使用中括号符号来动态计算对象的属性名称。对象属性名称的计算结果是由变量 key1 和 key2 的值决定的。
这种技巧不仅适用于字典（对象），还可以用于数组。例如，以下代码使用一个变量来计算数组的索引：
const arr = [1, 2, 3]; const index = 1; console.log(arr[index]); // 输出: 2
指导意义
由于 JavaScript 中的对象和数组是非常常见的数据结构，因此动态计算属性名称的技巧是非常实用和重要的。
在实际编程中，我们经常需要根据一些输入或状态来计算属性名称。这时候就需要使用中括号符号来动态计算属性名称。
在使用中括号符号时，要注意保证属性名称计算结果的正确性，并避免出现无法预料的错误。为了避免错误，可以先将计算结果保存到一个变量中，然后再使用该变量作为属性名称
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28918