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

Answer 2

第一个语句使用名为key0的单个属性定义一个新对象。

第二个语句为对象的名为key1的属性赋值。由于该对象没有自己的名为key1的属性，因此创建了该属性。

第三个陈述与第二个陈述相同。使用括号表示法而不是点符号的主要原因是：

包含特殊字符的属性，例如collection["foo-bar"]指的是名为foo-bar的属性，但collection.foo-bar对collection.foo和bar执行减法运算}。
变量属性名称，例如，您可以执行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"

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

2 个答案: