如何在javascript中向数组添加一个新对象（键值对）？

Question

我的一个数组是：

items=[{'id':1},{'id':2},{'id':3},{'id':4}];

我应该如何将新的一对 {'id':5} 添加到数组中？

- exAres

---

感谢@NDM的评论。我在jsfiddle上尝试了一些代码，它可以正常工作（使用items.push({'id':5})....）。但是当我使用相同的代码时，浏览器显示{{item.id}}而不是显示items的更新值（顺便说一下，我正在使用angularjs）。我不知道为什么会发生这种情况。 - exAres

可能是在JavaScript中向现有数组添加新值的重复问题。 - chryss

OP正在创建一个对象数组，而不是值数组。 - Marc Audet

可能是[数组追加]的重复问题（https://dev59.com/JXRC5IYBdhLWcg3wSu57）。 - adeady

Answer 1

使用 .push 方法:

items.push({'id':5});

- CodingIntrigue

---

我该如何在数组的特定位置添加它？比如说，在索引3处添加它。 - separ1

@separ1 arr[2] = "名字"; - Shmulik

@Shmulik，这将替换第2个位置而不是添加到那里。您实际上想要的是arr.splice(3, 0, {'id': 3})。 - Nick Murphy

Answer 2

.push() 方法可以向数组的末尾添加元素。

如果需要将元素添加到数组开头，请使用 .unshift() 方法，例如：

items.unshift({'id':5});

演示：

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
items.unshift({'id': 0});
console.log(items);

如果你想在特定的索引处添加对象，可以使用.splice() 方法：

items.splice(2, 0, {'id':5});
           // ^ Given object will be placed at index 2...

演示:

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
items.splice(2, 0, {'id': 2.5});
console.log(items);

- Mohammad Usman

---

请问如何添加 [{'id': 1,'newId': 'x' }, {'id': 2,'newId': 'y'}, {'id': 3,'newId': 'z'}]？ - KcH

@Codenewbie 抱歉，我没有理解你的问题。如果您能提供一些带有预期样本数据和输出结果的工作示例，那将非常好。 - Mohammad Usman

当然，我会问。 - KcH

Answer 3

有时候.concat()比.push()更好，因为.concat()返回新数组，而.push()返回数组长度。如果你要将变量设置为结果，请使用.concat()。

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
newArray = items.push({'id':5})

在这种情况下，newArray将返回5（数组的长度）。

newArray = items.concat({'id': 5})

然而，在这里newArray将返回[{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}, {'id': 5}]。

- Natorious

Answer 4

使用ES6的新解决方案

默认对象

object = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];

另一个对象

object =  {'id': 5};

对象赋值 ES6

resultObject = {...obj, ...newobj};

结果

[{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}, {'id': 5}];

- Ugur

---

请详细阐述您的答案，解释它是如何工作的。 - mip

我认为应该这样写：ary1 = [{'id': 1}, {'id': 2}]; ary2 = [{'id': 3}]; join = [...ary1, ...ary2]; - Soth

Answer 5

如果你正在使用jQuery，并且涉及到表单数据的serializeArray，例如：

var postData = $('#yourform').serializeArray();

// postData (array with objects) : 
// [{name: "firstname", value: "John"}, {name: "lastname", value: "Doe"}, etc]

...你需要向这个数组添加一个具有相同结构的键/值，例如当向PHP ajax请求发送数据时，使用以下代码：

postData.push({"name": "phone", "value": "1234-123456"});

结果：

// postData : 
// [{name: "firstname", value: "John"}, {name: "lastname", value: "Doe"}, {"name":"phone","value":"1234-123456"}]

- anoraq