【问题标题】：How can I add a key/value pair to a JavaScript object?如何将键/值对添加到 JavaScript 对象？
【发布时间】：2010-11-13 05:15:24
【问题描述】：

这是我的对象字面量：

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

如何向对象添加字段key3 和value3？

【问题讨论】：

嗯，整个 JS 中关联数组的问题很奇怪，因为你可以这样做...dreaminginjavascript.wordpress.com/2008/06/27/…
@Nosredna - 关键是，javascript 中没有关联数组之类的东西。在那篇文章中，他将对象属性添加到数组对象中，但这些并不是“数组”的真正组成部分。
有没有办法通过未来的 ES+ 实现有条件地设置对象字面量中的键：值对？

标签： javascript object-literal

【解决方案1】：

性能

今天 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）

结论

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

详情

在下面的 sn-p 中提供了经过测试的解决方案，您可以预先在您的机器上进行测试 HERE（2022 年更新：我非常感谢 Josh DeLong，他从 jspref.com 重写测试，停止工作到 jsbench.me )

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!

【讨论】：

【解决方案2】：

扩展运算符是一种有用且快速的语法，用于将项目添加到数组、组合数组或对象以及将数组扩展为函数的参数。现在，ES2018 为对象文字提供了扩展属性。它将自己的可枚举属性从提供的对象复制到新对象。

展开语法对于将对象的属性和方法组合成一个新对象很有用：

您可以像这样在对象中添加属性

const obj1 = {hello: "?"};
const obj2 = {...obj1, laugh: "?" };
console.log('obj1', obj1)
console.log('obj2', obj2)

你也可以像这样组合对象

const objectOne = {hello: "?"}
const objectTwo = {world: "?"}
const objectThree = {...objectOne, ...objectTwo, laugh: "?"}
console.log(objectThree) // Object { hello: "?", world: "?", laugh: "?" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("?".repeat(5))}}
objectFour.laugh() //

【讨论】：

【解决方案3】：

我们可以通过多种方式向 JavaScript 对象添加键/值对...

案例 - 1：扩展对象
使用这个我们可以同时向对象添加多个key: value。

const rectangle = { width: 4, height: 6 };
const cube = {...rectangle, length: 7};
const cube2 = {...rectangle, length: 7, stroke: 2};
  console.log("Cube2: ", cube2);
  console.log("Cube: ", cube);
  console.log("Rectangle: ", rectangle);

案例 - 2：使用dot 表示法

var rectangle = { width: 4, height: 6 };
rectangle.length = 7;
console.log(rectangle);

案例 - 3：使用[square] 表示法

var rectangle = { width: 4, height: 6 };
    rectangle["length"] = 7;
    console.log(rectangle);

【讨论】：

【解决方案4】：

您可以使用{[key]: value} 语法创建一个新对象：

const foo = {
  a: 'key',
  b: 'value'
}

const bar = {
  [foo.a]: foo.b
}

console.log(bar); // {key: 'value'}
console.log(bar.key); // value

const baz = {
  ['key2']: 'value2'
}

console.log(baz); // {key2: 'value2'}
console.log(baz.key2); // value2

使用之前的语法，您现在可以使用扩展语法{...foo, ...bar} 添加新对象，而不会改变旧值：

const foo = {a: 1, b: 2};

const bar = {...foo, ...{['c']: 3}};

console.log(bar); // {a: 1, b: 2, c: 3}
console.log(bar.c); // 3

【讨论】：

【解决方案5】：

大多数浏览器都支持，它检查对象键是否可用，如果可用它覆盖现有的键值并且它不可用它添加键值

示例 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

示例 2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

示例 3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }

【讨论】：

【解决方案6】：

只需添加属性：

而我们想给这个对象添加prop2 : 2，这些是最方便的选项：

点运算符：object.prop2 = 2;
方括号：object['prop2'] = 2;

那我们用哪一个呢？

点运算符的语法更简洁，应作为默认值使用 (imo)。但是，点运算符不能为对象添加动态键，这在某些情况下非常有用。这是一个例子：

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

合并对象：

当我们想要合并 2 个对象的属性时，这些是最方便的选项：

Object.assign()，将一个目标对象作为参数，以及一个或多个源对象并将它们合并在一起。例如：

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

对象扩展运算符...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

我们使用哪一个？

spread 语法不那么冗长，应该将 has 用作默认 imo。不要忘记将此语法转换为所有浏览器都支持的语法，因为它相对较新。
Object.assign() 更具动态性，因为我们可以访问作为参数传入的所有对象，并且可以在将它们分配给新对象之前对其进行操作。

【讨论】：

在您帖子的顶部：那些不是大括号，而是方括号。

【解决方案7】：

既然是过去的问题，而是现在的问题。建议另一种解决方案：只需将键和值传递给函数，您将获得一个地图对象。

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

【讨论】：

这似乎与所提出的问题完全无关。

【解决方案8】：

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() 会触发 setters，而展开语法则不会。

现场示例

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

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

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

2019 年答案

~~Object assignment operator+=:~~

obj += {key3: "value3"};

哎呀...我被带走了。从未来走私信息是非法的。完全被遮蔽了！

【讨论】：

【解决方案9】：

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

输出如下：-

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]

【讨论】：

【解决方案10】：

下一个 Javascript 规范（候选阶段 3）中的一个简短而优雅的方法是：

obj = { ... obj, ... { key3 : value3 } }

可以在Object spread vs Object.assign 和Dr. Axel Rauschmayers site 上找到更深入的讨论。

自 8.6.0 版以来，它已在 node.js 中运行。

最新版本的 Vivaldi、Chrome、Opera 和 Firefox 也知道此功能，但 Mirosoft 直到今天才知道，无论是在 Internet Explorer 还是在 Edge 中。

【讨论】：

【解决方案11】：

实现相同的最佳方法如下所述：

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

【讨论】：

【解决方案12】：

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

【讨论】：

这是数组，不是对象。

【解决方案13】：

我们也可以这样做。

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }

【讨论】：

【解决方案14】：

大多数答案中已经提到了两种最常用的方法

obj.key3 = "value3";

obj["key3"] = "value3";

另一种定义属性的方法是使用 Object.defineProperty()

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

当您希望在定义属性时拥有更多控制权时，此方法很有用。定义的属性可以设置为用户可枚举、可配置和可写。

【讨论】：

【解决方案15】：

为了将键值对预先添加到对象，以便 for in 与该元素一起使用，首先执行以下操作：

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;

【讨论】：

【解决方案16】：

在编写大型项目时，我越来越喜欢LoDash / Underscore。

obj['key'] 或 obj.key 添加都是可靠的纯 JavaScript 答案。然而，在处理对象和数组时，LoDash 和 Underscore 库都提供了许多额外的便利功能。

.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}

【讨论】：

我相信 _.merge 现在是 _.extend(destination, others)
啊，你是对的，_.extend 是一个更通用的别名，因为下划线库仍然使用extend 而不是merge。我会更新我的答案。

【解决方案17】：

obj['key3'] = value3 或 obj.key3 = value3 会将新对添加到 obj。

但是，我知道没有提到 jQuery，但是如果您正在使用它，您可以通过 $.extend(obj,{key3: 'value3'}) 添加对象。例如：

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

jQuery.extend(target[,object1][,objectN]) 将两个或多个对象的内容合并到第一个对象中。

它还允许使用$.extend(true,object1,object2); 进行递归添加/修改：

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

【讨论】：

【解决方案18】：

你可以创建一个答案为@Ionuț G. Stan的类

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

用最后一个类创建一个新对象：

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

打印对象

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}

打印密钥

console.log(my_obj.obj["key3"]) //Return value3

我是 javascript 的新手，欢迎使用 cmets。对我有用。

【讨论】：

【解决方案19】：

根据在 ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67) 中定义的属性访问器，您可以通过两种方式向存在的对象添加属性。这两种方式，Javascript引擎都会一视同仁。

第一种方法是使用点表示法：

obj.key3 = value3;

但是这样，你应该在点符号之后使用 IdentifierName。

第二种方法是使用括号表示法：

obj["key3"] = value3;

还有另一种形式：

var key3 = "key3";
obj[key3] = value3;

这样，您可以在括号表示法中使用 Expression（包括 IdentifierName）。

【讨论】：

【解决方案20】：

我知道已经有一个公认的答案，但我想我会在某个地方记录我的想法。请[人们]随意戳这个想法，因为我不确定它是否是最好的解决方案......但我只是在几分钟前把它放在一起：

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

你可以这样使用它：

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

由于原型函数返回this，您可以继续将.push 链接到obj 变量的末尾：obj.push(...).push(...).push(...);

另一个特点是您可以将数组或另一个对象作为值传递给 push 函数参数。请参阅我的小提琴以获取工作示例：http://jsfiddle.net/7tEme/

【讨论】：

也许这不是一个好的解决方案，我似乎在 jquery1.9 中遇到错误：TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)') 这很奇怪，因为即使使用 jquery1.9 它也可以在 jsfiddle 中使用
你不应该扩展 Object.prototype;这破坏了 JavaScript 的“对象即哈希表”功能（以及随后的许多库，例如 Google Maps JS API）。见讨论：stackoverflow.com/questions/1827458/…

【解决方案21】：

如果您在一个 Object 中有多个匿名 Object 字面量，并且想要添加另一个包含键/值对的 Object，请执行以下操作：

Firebug' 对象：

console.log(Comicbook);

返回：

[对象 { name="蜘蛛侠", value="11"}, 对象 { name="Marsipulami", value="18"}, 对象 { name="Garfield", value="2"}]

代码：

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

将Object {name="Peanuts", value="12"} 添加到 Comicbook 对象

【讨论】：

很好&清楚地解释了其他选项，它更适合使用 id 或 name 属性处理对象，然后在添加时分配它，好一个。特别是当它拥有或将来可能拥有更多道具时，同样的方法将适用，只是再次昏迷，并准备好改变计划

【解决方案22】：

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

arr[ 'key3' ] = value3;

或

arr.key3 = value3;

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

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

此后，请求arr.a_key 将返回value3 的值，即文字3。

【讨论】：

这不是一个数组而是一个对象。 JS 数组仅按整数索引。尝试做 arr.length，它会返回 0。更多阅读：less-broken.com/blog/2010/12/…
@DevAntoine 的链接无法访问。如果要获取此数组类型的“长度”，请使用： Object.keys(your_array).length 更多关于此问题的阅读，请参阅：stackoverflow.com/questions/21356880/array-length-returns-0
也可以简单地覆盖他们正在创建的数组的长度属性。设置 var myarray["length"] = numArrayFields 为我解决了这个问题。假设您正在以某种方式跟踪要添加到数组中的字段数。

【解决方案23】：

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

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

【讨论】：

obj 是一个对象。大括号之间（包括）的部分是对象字面量。 obj 不是对象文字。
如果键是数字怎么办？ obj.123 = 456 不起作用。 obj[123] = 456 确实有效
@axelfreudiger 实际上，任何在语法上不是有效变量标识符的东西都必须使用括号表示法。
@KyleKhalaf Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);
@JohnSmith length 属性未设置，因为它不是数组，而是对象/地图/字典。

【解决方案24】：

你可以这样添加：

arr['key3'] = value3;

或者这样：

arr.key3 = value3;

建议使用变量key3 键入对象的答案仅在key3 的值为'key3' 时才有效。

【讨论】：

【解决方案25】：

您的示例显示了一个对象，而不是一个数组。在这种情况下，将字段添加到 Object 的首选方法是分配给它，如下所示：

arr.key3 = value3;

【讨论】：

【解决方案26】：

arr.key3 = value3;

因为你的 arr 并不是一个真正的数组......它是一个原型对象。真正的数组是：

var arr = [{key1: value1}, {key2: value2}];

但还是不对。实际上应该是：

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

【讨论】：

性能

详情

只需添加属性：

合并对象：

2017年回答：Object.assign()

现场示例

2018 年答案：对象扩展运算符{...}

现场示例

2019 年答案

_.merge（仅限 Lodash）

_.extend / _.assign

_.defaults

$.extend

Object.assign()

使用点表示法：

使用方括号表示法：

数组字面量表示法：

数组构造函数表示法：

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

2018 年答案：对象扩展运算符`{...}`