如何将键/值对添加到JavaScript对象？

Question

下面是我的对象字面量：

var obj = {key1: value1, key2: value2};

如何将带有value3的字段key3添加到object中？

Answer 1

有两种方法可以将新的属性添加到对象：

var obj = {
    key1: value1,
    key2: value2
};

使用点符号：

obj.key3 = "value3";

使用方括号表示法：

obj["key3"] = "value3";

当您知道属性的名称时，将使用第一种形式。第二种形式是在动态确定属性名称时使用的。如下例所示：

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

可以使用以下任一方法构造实际的JavaScript数组：

数组文字表示法：

var arr = [];

数组构造函数表示法：

var arr = new Array();

Answer 2

在编写大型项目时，我逐渐喜欢上了LoDash / Underscore。

通过obj['key']或obj.key添加都是可靠的纯JavaScript答案。但是，在一般使用对象和数组时，LoDash和下划线库都提供了许多额外的方便函数。

.push() is for Arrays，不是针对objects的。

根据您正在寻找的是什么，有两个特定的功能可能会很好地利用，并提供类似于arr.push()的功能。有关更多信息，请查看文档，他们有一些很好的例子。

_.merge (仅限Lodash)

第二个对象将覆盖或添加到基本对象。不复制undefined值。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.extend / _.assign

第二个对象将覆盖或添加到基本对象。将复制undefined。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.defaults

第二个对象包含缺省值，如果它们不存在，将被添加到基本对象中。如果undefined已经存在，则会复制key的值。

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$.extend

此外，值得一提的是jQuery.extend，它的功能类似于_.merge，如果你已经在使用jQuery，它可能是一个更好的选择。

第二个对象将覆盖或添加到基本对象。不复制undefined值。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign()

值得一提的是ES6/ES2015 Object.assign，它的功能类似于_.merge，如果你已经在使用像Babel这样的ES6/ ES2015 polyfill，如果你想要polyfill yourself，它可能是最好的选择。

第二个对象将覆盖或添加到基本对象。将复制undefined。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

Answer 3

您可以使用这两个密钥中的任何一个(假设key3是您要使用的急性密钥)

arr[ 'key3' ] = value3;

或

arr.key3 = value3;

如果key3是一个变量，那么您应该这样做：

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

在此之后，请求arr.a_key将返回value3的值，这是一个文字3。