在 JavaScript 中为数组中的所有对象添加一个键/值对

将键/值对添加到数组中的所有对象：

使用该Array.forEach()方法遍历数组。
使用点符号向每个对象添加一个键/值对。
键/值对将添加到数组中的所有对象。

索引.js


const arr = [{id: 1}, {id: 2}];

arr.forEach(object => {
  object.color = 'red';
});

// 👇️ [{id: 1, color: 'red'}, {id: 2, color: 'red'}]
console.log(arr);

我们传递给Array.forEach方法的函数
会针对数组中的每个元素（对象）进行调用。

在每次迭代中，我们
向当前对象添加一个键/值对。

如果您需要添加到对象的键的名称
包含连字符、空格或以数字开头，请使用括号表示法将键添加到每个对象。

索引.js


const arr = [{id: 1}, {id: 2}];

arr.forEach(object => {
  object['full name'] = 'Bobby Hadz';
});

// [
//   { id: 1, 'full name': 'Bobby Hadz' },
//   { id: 2, 'full name': 'Bobby Hadz' }
// ]
console.log(arr);

该Array.forEach()方法遍历数组并将键值对添加到每个对象。

如果您不想改变原始数组，请使用该Array.map()方法。

将键/值对添加到数组中的所有对象使用`Array.map()`

这是一个三步过程：

使用该Array.map()方法遍历数组。
使用传播语法向每个对象添加一个键/值对。
键/值对将添加到新数组中的所有对象。

索引.js


const arr = [{id: 1}, {id: 2}];

const arrWithColor = arr.map(object => {
  return {...object, color: 'red'};
});

// 👇️ [{id: 1, color: 'red'}, {id: 2, color: 'red'}]
console.log(arrWithColor);

// 👇️ [{id: 1}, {id: 2}]
console.log(arr);

我们传递给Array.map()方法的函数

会针对数组中的每个元素（对象）进行调用。

我们使用
扩展语法 (…)来解压缩每个对象的键/值对，并添加一个额外的键/值对。

索引.js


const arrWithColor = arr.map(object => {
  return {...object, color: 'red'};
});

考虑传播语法的一种简单方法是，我们将源对象的键/值对解包到目标对象中。

我们基本上转移了id属性并color为每个对象添加了一个属性。

该Array.map()方法不同于Array.forEach()因为map()
返回一个新数组，而forEach()返回undefined.

使用该forEach()方法时，我们就地改变数组。

使用 Object.assign() 而不是扩展语法 (…)

您也可以使用该Object.assign()方法而不是使用扩展语法。

索引.js


const arr = [{id: 1}, {id: 2}];

const arrWithColor = arr.map(object => {
  return Object.assign(object, {color: 'red', country: 'Chile'});
});

// [
//   { id: 1, color: 'red', country: 'Chile' },
//   { id: 2, color: 'red', country: 'Chile' }
// ]
console.log(arrWithColor);

我们使用该Object.assign()方法将一个或多个对象的键值对复制到目标对象中。

我们传递给Object.assign方法的参数
是：

目标对象– 提供的属性将应用到的对象。
源对象– 一个或多个包含我们要应用于目标对象的属性的对象。

您可以想象，我们作为第二个参数传递给的对象的键值Object.assign()对被复制到我们为第一个参数提供的对象中。

有条件地为数组中的所有对象添加一个键值对

如果需要有条件地向数组中的所有对象添加键值对，请使用三元运算符。

索引.js


const arr = [{id: 1}, {id: 2}];

const arrWithColor = arr.map(object => {
  return {...object, name: object.id > 1 ? 'Bobby' : 'Alice'};
});

// 👇️ [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby' } ]
console.log(arrWithColor);

三元运算符与语句非常相似if/else。

如果问号左边的表达式返回真值，则运算符返回冒号左边的值，否则返回冒号右边的值。

在示例中，我们检查当前对象的id属性是否大于
1。

如果满足条件，Bobby则返回该name属性的字符串，否则Alice返回该字符串。

这是等效的if/else语句。

索引.js


const arr = [{id: 1}, {id: 2}];

const arrWithColor = arr.map(object => {
  if (object.id > 1) {
    return {...object, name: 'Bobby'};
  } else {
    return {...object, name: 'Alice'};
  }
});

// 👇️ [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby' } ]
console.log(arrWithColor);

如果对象的id属性大于1，if则块运行，否则，else块运行。

使用 for…of 将键/值对添加到数组中的所有对象

您还可以使用简单的for...of循环将键值对添加到数组中的所有对象。

索引.js


const arr = [{id: 1}, {id: 2}];

for (const obj of arr) {
  obj.color = 'red';
}

// 👇️ [ { id: 1, color: 'red' }, { id: 2, color: 'red' } ]
console.log(arr);

for …of语句用于循环遍历可迭代对象，如数组、字符串Map、Set和
NodeList对象generators。

在每次迭代中，我们都会在适当的位置向当前对象添加一个新的键值对。

`for`使用循环将键/值对添加到数组中的所有对象

您还可以使用基本for循环将键值对添加到数组中的所有对象。

索引.js


const arr = [{id: 1}, {id: 2}];

for (let index = 0; index < arr.length; index++) {
  arr[index].color = 'green';
}

// 👇️ [ { id: 1, color: 'green' }, { id: 2, color: 'green' } ]
console.log(arr);

与or
for相比，基本循环非常冗长。forEach()for...of

在添加键值对之前，我们还必须使用索引来访问当前迭代的对象。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

在 JavaScript 中为数组中的所有对象添加一个键/值对

目录

Add a Key/Value pair to all Objects in Array in JavaScript