如何向 JavaScript 对象添加键/值对？

Question

这是我的对象文字：

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

如何将带有 value3 的字段 key3 添加到对象？

Answer 1

您可以使用其中任何一个（假设 key3 是您想要使用的实际密钥），

arr[ 'key3' ] = value3;

或者

arr.key3 = value3;

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

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

在此之后，请求 arr.a_key 将返回 < code>value3，文字 3。

Answer 2

今天 2020 年 1 月 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）
• 经典可变方法（例如< ）快得多code>obj.key3 = "abc" (MA,MB)
• 对于不可变解决方案 {...obj, key3:'abc'} 和 Object.assign 是最快的 (IA,IB) 速度最快，
• 令人惊讶的是，不可变的解决方案比 chrome (MC-IA) 和 safari (MD-IB) 的一些可变解决方案更快

详细信息

在下面的代码片段中，有经过测试的解决方案，您可以在您的计算机上进行测试此处（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!

Answer 3

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

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

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

const obj1 = {hello: "

Answer 4

arr.key3 = value3;

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

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

但它仍然不正确。 它实际上应该是：

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

Answer 5

简单地添加属性：

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

1. 点运算符：object.prop2 = 2;
2. 方括号：< code>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);

合并对象：

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

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

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

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

console.log(object2);

2. 对象扩展运算符 ...

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

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

console.log(newObj);

我们使用哪一个？

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

Answer 6

我知道这个问题已经有一个公认的答案，但我想我应该在某个地方记录我的想法。 请[人们]随意在这个想法中找出漏洞，因为我不确定这是否是最好的解决方案......但我只是在几分钟前将其放在一起：

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

另一个功能是您可以传递数组或另一个对象作为推送函数参数中的值。 请参阅我的小提琴的工作示例： http://jsfiddle.net/7tEme/

Answer 7

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

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

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

Answer 8

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

arr.key3 = value3;

Answer 9

我们可以通过多种方式向 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);

CASE - 2：使用点表示法

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

CASE - 3：使用[square]表示法

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

Answer 10

您可以这样添加它：

arr['key3'] = value3;

或这样：

arr.key3 = value3;

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

Answer 11

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

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

可以在 对象传播与 Object.assign 以及 博士。 阿克塞尔·劳施迈耶斯网站。

自 8.6.0 版本以来，它已经在 Node.js 中运行。

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

Answer 12

您可以使用 {[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

Answer 13

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>

Answer 14

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

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

Answer 15

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

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 16

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, scalar};

来自 MDN：

它将自己的可枚举属性从提供的对象复制到新对象。

现在可以使用比Object.assign()。

请注意Object.assign () 触发 setters< /a> 而扩展语法则不然。

实例

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

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

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

2019 年答案

对象赋值运算符 +=:

obj += {key3: "value3"};

哎呀...我得意忘形了。 走私未来信息是非法的。 妥妥的遮遮掩掩！

Answer 17

我越来越喜欢 LoDash / 在编写较大项目时使用下划线。

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

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

根据您要寻找的内容，有两个特定的函数可能很好用，并且提供类似于 arr.push() 的功能。 有关更多信息，请查看文档，他们有一些很棒的示例。

_.merge （仅限 Lodash）

第二个对象将覆盖或添加到基础对象。
未定义值不会被复制。

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

第二个对象包含默认值，如果它们不存在，则将添加到基础对象中。
如果键已存在，则将复制未定义值。

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

第二个对象将覆盖或添加到基础对象。
未定义值不会被复制。

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，如果你已经在使用像 自己填充。

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