JavaScript 对象动态添加属性的最佳实践：用变量设置属性名

用变量为 JavaScript 对象添加属性

作为一名经验丰富的程序员，我经常遇到这样的情况：从 DOM 中提取元素时，需要使用一个变量来保存该元素的 ID，然后才能将该 ID 用作对象的属性名。

问题

最初，我尝试使用点语法为对象添加属性，如下所示：

obj.elementId = value;

然而，这会引发一个错误，因为 elementId 不是一个有效的属性名。

解决方案

为了使用变量为 JavaScript 对象添加属性，可以使用方括号表示法，如下所示：

obj[name] = value;

在这种方法中，name 是一个变量，其值将用作属性名。例如：

const obj = {};
const elementId = 'myId';
obj[elementId] = 'value';

这将创建一个名为 "myId" 的属性，其值为 "value"。

注意事项

使用方括号表示法时，属性名必须是一个字符串。如果你尝试使用非字符串值，JavaScript 将自动将其转换为字符串。

示例

以下是一个实际示例，说明如何使用方括号表示法为 JavaScript 对象添加属性：

const itemsFromDom = $('#my-list li');
const obj = {};

$(itemsFromDom).each(function() {
  const element = $(this);
  const id = element.attr('id');
  const value = element.attr('value');

  obj[id] = value;
});

在这个示例中，obj 对象现在将具有一个属性，其名称为从 DOM 中提取的每个元素的 ID，其值为每个元素的 value 属性。

常见问题解答

• 可以使用方括号表示法设置对象的嵌套属性吗？

是的，你可以通过使用点语法访问嵌套属性，如下所示：

obj['nested']['property'] = 'value';

• 如果属性名包含空格或特殊字符怎么办？

属性名必须是一个字符串，因此如果你需要包含空格或特殊字符，你必须将属性名括在引号中，如下所示：

obj["my property"] = 'value';

• 使用方括号表示法和点语法有什么区别？

方括号表示法允许你使用变量或表达式作为属性名，而点语法仅限于字符串属性名。

• 方括号表示法有什么性能影响？

使用方括号表示法比使用点语法慢一些，但通常可以忽略不计。

• 我应该总是使用方括号表示法吗？

不，如果你知道属性名是静态的，则使用点语法更简洁。然而，如果你需要动态添加属性或使用变量作为属性名，那么方括号表示法是必要的。