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

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();

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而传播语法则不会。

活生生的例子

它适用于当前的 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}

_.默认值

第二个对象包含默认值，如果它们不存在，将添加到基础对象中。 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，它可能是一个更好的选择。

第二个对象将覆盖或添加到基础对象。 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，它可能是最好的选择。

第二个对象将覆盖或添加到基础对象。 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}

您可以使用其中任何一个（前提是 key3 是您要使用的实际密钥）

arr[ 'key3' ] = value3;

或者

arr.key3 = value3;

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

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

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

表现

今天 2020.01.14 我在 Chrome v78.0.0、Safari v13.0.4 和 Firefox v71.0.0 上对 MacOs HighSierra 10.13.6 进行测试，以获取选定的解决方案。我将解决方案分为可变（第一个字母 M）和不可变（第一个字母 I）。我还提供了一些尚未在此问题的答案中发布的不可变解决方案（IB、IC、ID/IE）

结论

• 最快的可变解决方案比最快的不可变解决方案（> 10 倍）快得多
• 像obj.key3 = "abc"(MA,MB)这样的经典可变方法是最快的
• 对于不可变解决方案，{...obj, key3:'abc'}和Object.assign(IA,IB) 是最快的
• 令人惊讶的是，对于 chrome (MC-IA) 和 safari (MD-IB)，有一些不可变的解决方案比一些可变的解决方案更快

细节

在下面的代码段中，有预先测试的解决方案，您可以在这里在您的机器上进行测试

var o = {
    key1: true,
    key2: 3,
};

var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);



function MA(obj) {
  obj.key3 = "abc";
  return obj;
}

function MB(obj) {
  obj['key3'] = "abc";
  return obj;
}

function MC(obj) {
  Object.assign(obj, {key3:'abc'});
  return obj;
}

function MD(obj) {
  Object.defineProperty(obj, 'key3', {
    value: "abc",       // undefined by default
    enumerable: true,      // false by default
    configurable: true,    // false by default
    writable: true         // false by default
  });
  return obj;
}

function IA(obj) {
  return {...obj, key3:'abc'};
}

function IB(obj) {
  return Object.assign({key3:'abc'}, obj);
}

function IC(obj) {
  let ob= JSON.parse(JSON.stringify(obj))
  ob.key3 = 'abc';
  return ob;
}


function ID(obj) {
	let ob= Object.fromEntries(Object.entries(obj));
  ob.key3 = 'abc';
  return ob;
}

function IE(obj) {
	return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}



log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);

This snippet only presents code - it not perform tests itself!