在JavaScript中，我们可以通过“点”符号或方括号来访问对象的属性。但是，在某些情况下，我们可能需要动态地给对象添加属性，这就需要使用动态命名属性了。
动态命名属性
动态命名属性是指属性名不是在代码编写时确定的，而是在运行时根据某些条件生成的。例如，我们有一个对象，它的属性名是一个变量：
const propName = 'foo';
const obj = {};
obj[propName] = 'bar';这里，属性名propName是动态生成的，它的值是'foo'，所以这段代码实际上相当于：
const obj = { foo: 'bar' };动态命名属性的限制
但是，动态命名属性也有一些限制。首先，如果属性名是一个未定义的变量，那么会抛出ReferenceError错误：
const obj = {};
const propName = undefined;
obj[propName] = 'bar'; // 抛出 ReferenceError 错误其次，如果属性名是一个保留字或包含特殊字符，那么需要使用方括号标记来访问它：
const obj = {};
obj['class'] = 'my-class';将动态命名属性添加到对象中
现在，我们已经知道了什么是动态命名属性以及它的一些限制。那么，如何将动态命名属性添加到JavaScript对象中呢？
答案是使用方括号标记：
const obj = {};
const propName = 'foo';
obj[propName] = 'bar';这里，我们使用变量propName作为属性名，并将其放在方括号中。这样，就可以动态地给对象添加属性了。
示例代码
下面是一个完整的示例代码，演示如何将动态命名属性添加到JavaScript对象中：
-- -------------------- ---- ------- ----- --- - --- -- ------- ----- --------- - ------- ----- ---------- - -------- -------------- - ----------- -- ------ ----- --------- - --- ----- ---------- - ------------ -------------- - ----------- -- ------ ----- --------- - ----- ----- ---------- - ------ -------------- - ----------- ----------------- -- - ----- -------- ----- ------------ ----- ----- -
在这个示例中，我们分别添加了一个字符串、一个数字和一个布尔属性。注意，在对象字面量中无法使用变量作为属性名，只能使用静态字符串或数字。因此，我们必须使用方括号标记来实现动态属性名。
结论
动态命名属性是一种非常有用的技术，它可以让我们在运行时动态地给JavaScript对象添加属性。但是，需要注意的是，动态命名属性有一些限制，例如属性名不能是未定义的变量，并且必须使用方括号标记访问。如果正确使用动态命名属性，它将成为JavaScript编程中的一个强大工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8132