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

这是我的对象文字：

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

如何将{key3: value3}添加到对象？

javascript object-literal

答案

有两种方法可以向对象添加新属性：

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 = [];

Array 构造函数表示法：

var arr = new Array();

2017 年答案： `Object.assign()`

Object.assign（dest，src1，src2，...）合并对象。

它使用（但是很多）源对象的属性和值覆盖dest ，然后返回dest 。

Object.assign()方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

实例

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

2018 年回答：对象传播运算符`{...}`

obj = {...obj, ...pair};

来自MDN ：

它将自己的可枚举属性从提供的对象复制到新对象上。
现在可以使用比Object.assign()更短的语法来进行浅层克隆（不包括原型）或合并对象。
请注意， Object.assign()会触发setter，而 spread 语法则不会。

实例

它适用于当前的 Chrome 和当前的 Firefox。他们说它在目前的 Edge 中不起作用。

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

2019 年答案

~~对象赋值运算符 += ：~~

obj += {key3: "value3"};

哎呀... 我被带走了。来自未来的走私信息是非法的。适当地模糊了！

我越来越喜欢了的LoDash / 下划线写较大的项目时。

通过obj['key']或obj.key都是纯粹的纯 JavaScript 答案。但是，在处理对象和数组时，LoDash 和 Underscore 库都提供了许多其他方便的功能。

.push()适用于数组，不适用于对象。

根据您的需求，有两个特定的功能可能很好用，并提供类似于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值。

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，它可能是更好的选择。