在JavaScript中，我们可以通过变量来动态创建和设置对象的键。这对于动态生成对象属性非常有用，特别是当我们无法确定对象键的名称时。
使用方括号表示法
JavaScript 对象可以使用点号（.）或方括号（[]）表示法访问属性。当属性名不是一个有效的标识符时，我们只能使用方括号表示法。
以下示例演示了如何使用方括号表示法动态设置对象属性：
----- --- - --- ----- --- - ------ ----- ----- - ------ -------- - ------ ----------------- -- - ---- ----- -
在上面的代码中，我们首先创建一个空对象 obj，然后定义变量 key 和 value 分别表示要设置的属性名称和属性值。最后，我们使用方括号表示法将属性名称作为变量传递给对象，并设置属性值为变量 value 的值。
使用计算属性名称
ES2015 引入了一种更简单的语法，称为“计算属性名称”，允许我们在对象字面量中使用表达式来动态计算属性名称。
以下示例演示了如何使用计算属性名称设置对象属性：
----- --- - ------ ----- ----- - ------ ----- --- - - ------ ----- -- ----------------- -- - ---- ----- -
在上面的代码中，我们使用方括号包含变量 key，并将其作为属性名称传递给对象字面量。这将计算表达式 key 的值，并将其设置为属性名称。
建议
- 使用
[]表示法访问变量中的属性名时，务必确保该变量已经被初始化。 - 当使用计算属性名称时，可以在方括号内使用任何有效的 JavaScript 表达式，包括函数调用和模板字面量，但不建议滥用此功能。
- 在动态创建对象属性时，应该避免使用关键字作为属性名称。
结论
在 JavaScript 中，我们可以通过变量动态设置对象属性。使用方括号表示法或计算属性名称语法，可以更轻松地创建动态属性名称。然而，在实际应用中，我们应该谨慎使用这些功能，并在使用时注意安全性和代码可读性。
示例代码：https://codepen.io/chatgpt/pen/LYyKjJG
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8257