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

Question

我遇到了以下3种方法，可以通过这些方法将属性添加到对象。

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

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

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

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

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

这三种方法是否都做完全相同的工作？

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

Answer 2

第一条语句定义了一个具有名为key0的单个属性的新对象。

第二条语句为对象的名为key1的属性分配一个值。 由于对象没有自己的名为key1的属性，因此将创建该属性。

第三条语句与第二条语句的作用相同。 使用括号表示法代替点表示法的主要原因是：

• 具有特殊字符的属性，例如collection["foo-bar"]指的是称为foo-bar的属性，但是collection.foo-bar在collection.foo和bar上执行减法运算。

• 可变属性名称，例如，可以执行var propName = "key0"; collection[propName] = ... var propName = "key0"; collection[propName] = ...

定义属性的唯一其他方法是使用Object.defineProperty （以及多个变体Object.defineProperties ）。 这使您可以定义以特殊方式运行的属性。

Object.defineProperty(collection, "key3", {
    enumerable: false,    // property will not show up in for-in loops
    configurable: false,  // property cannot be changed
    set: function(val) {
        alert("we tried to set key3 to " + val);
    },
    get: function() {
        alert("this code runs when we get collection.key3");
        return "value3";
    }
});

collection.key3 = 6;  // alerts "we tried to set key3 to 6"
collection.key3;      // alerts "this code runs when we get collection.key3"
                      // and returns the string "value3"