javascript - 向 JavaScript 对象添加属性的不同方法

Question

我遇到过以下 3 种可以将属性添加到对象的方法。

> collection = {key0: 'value0'}
{ key0: 'value0' }

> collection.key1 = 'value1';
'value1'

> collection['key2'] = 'value2';
'value2'

> collection
{ key0: 'value0',
  key1: 'value1',
  key2: 'value2' }

是否存在其他可以将属性添加到对象的方法。

这 3 种方法的作用完全相同吗？

Answer 1

这里有一个重要的区别:第一个示例创建一个新对象(这称为“对象文字”)，其他两个示例更改已经存在的对象。

第二个和第三个示例以相同的方式更改collection对象，区别在于无法使用点表示法中的变量属性名称:

// Let's say we have an object
var collection = { key0 : "value0" };

// Let's say for some reason we want to use a variable as a property name
var keyName = "key1";

// This won't assign "someValue" to the property "key1" as you would expect
// instead it will assign it to the property "keyName" (the string, not the variable)
collection.keyName = "someValue"; // OOPS

// With bracket notation you can use a variable (or any expression) as a property name
collection[keyName] = "value1"; // Sweet