JavaScript通过变量设置对象键

在JavaScript中，我们可以通过变量来动态创建和设置对象的键。这对于动态生成对象属性非常有用，特别是当我们无法确定对象键的名称时。

使用方括号表示法

JavaScript 对象可以使用点号（.）或方括号（[]）表示法访问属性。当属性名不是一个有效的标识符时，我们只能使用方括号表示法。

以下示例演示了如何使用方括号表示法动态设置对象属性：

const obj = {};
const key = 'foo';
const value = 'bar';

obj[key] = value;

console.log(obj); // { foo: 'bar' }

在上面的代码中，我们首先创建一个空对象 obj，然后定义变量 key 和 value 分别表示要设置的属性名称和属性值。最后，我们使用方括号表示法将属性名称作为变量传递给对象，并设置属性值为变量 value 的值。

使用计算属性名称

ES2015 引入了一种更简单的语法，称为“计算属性名称”，允许我们在对象字面量中使用表达式来动态计算属性名称。

以下示例演示了如何使用计算属性名称设置对象属性：

const key = 'foo';
const value = 'bar';

const obj = {
  [key]: value
};

console.log(obj); // { foo: 'bar' }

在上面的代码中，我们使用方括号包含变量 key，并将其作为属性名称传递给对象字面量。这将计算表达式 key 的值，并将其设置为属性名称。

建议

• 使用 [] 表示法访问变量中的属性名时，务必确保该变量已经被初始化。
• 当使用计算属性名称时，可以在方括号内使用任何有效的 JavaScript 表达式，包括函数调用和模板字面量，但不建议滥用此功能。
• 在动态创建对象属性时，应该避免使用关键字作为属性名称。

结论

在 JavaScript 中，我们可以通过变量动态设置对象属性。使用方括号表示法或计算属性名称语法，可以更轻松地创建动态属性名称。然而，在实际应用中，我们应该谨慎使用这些功能，并在使用时注意安全性和代码可读性。

示例代码：https://codepen.io/chatgpt/pen/LYyKjJG

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8257