如何在 JavaScript 中对对象数组中的属性求和

作者

目录

Sum a Property in an Array of Objects in JavaScript

  1. 在 JavaScript 中对对象数组中的属性求和
  2. 使用对象数组中的属性求和Array.forEach()
  3. for使用循环对对象数组中的属性求和
  4. map()使用和对对象数组中的属性求和reduce()

在 JavaScript 中对对象数组中的属性求和

对对象数组中的属性求和：

  1. 使用该reduce()方法遍历数组。
  2. 在每次迭代中，将总和增加到特定值。
  3. 结果将包含特定属性值的总和。
索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

const sum = arr.reduce((accumulator, object) => {
  return accumulator + object.salary;
}, 0);

console.log(sum); // 👉️ 60

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

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

该accumulator参数的初始值为 ，0 因为这是我们作为该方法的第二个参数提供的值。 reduce()

我们按数组中每个对象的属性accumulator值递增。salary

该方法返回数组中所有对象的值reduce()的总和。salary

如果您必须经常这样做，请定义一个可重用的函数。

索引.js
function calculateSum(array, property) {
  const total = array.reduce((accumulator, object) => {
    return accumulator + object[property];
  }, 0);

  return total;
}

const arr = [
  {id: 1, salary: 10, age: 20},
  {id: 2, salary: 20, age: 30},
  {id: 3, salary: 30, age: 40},
];

const result1 = calculateSum(arr, 'salary');
console.log(result1); // 👉️ 60

const result2 = calculateSum(arr, 'age');
console.log(result2); // 👉️ 90

该calculateSum函数以一个数组和一个属性作为参数，并计算对象数组中指定属性的总和。

如果您需要对对象的值求和，请查看以下
文章。

另一种可能更简单的方法是使用该forEach方法。

使用对象数组中的属性求和Array.forEach()

这是一个三步过程：

  1. sum使用关键字声明一个变量let并将其设置为0.
  2. 调用forEach()方法迭代数组。
  3. 在每次迭代中，sum使用对象的值递增变量。
索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

let sum = 0;

arr.forEach(element => {
  sum += element.salary;
});

console.log(sum); // 👉️ 60

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

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

请注意，我们sum使用关键字声明了变量。我们不能重新分配使用声明的变量。 let const

在循环的每次迭代中，我们增加存储在变量中的值sum
以获得总量。

这种方法更具可读性和直观性，尤其是当您不习惯该reduce()方法的工作方式时。

如果您必须经常这样做，请定义一个可重用的函数。

索引.js
function calculateSum(array, property) {
  let sum = 0;

  array.forEach(element => {
    sum += element[property];
  });

  return sum;
}

const arr = [
  {id: 1, salary: 10, age: 20},
  {id: 2, salary: 20, age: 30},
  {id: 3, salary: 30, age: 40},
];

const result1 = calculateSum(arr, 'salary');
console.log(result1); // 👉️ 60

const result2 = calculateSum(arr, 'age');
console.log(result2); // 👉️ 90

该calculateSum函数将一个对象数组和一个属性作为参数，并计算指定属性的总和。

您也可以通过使用基本循环来获得相同的结果for。

for使用循环对对象数组中的属性求和

这是一个三步过程：

  1. sum使用关键字声明一个变量let并将其设置为0.
  2. 使用for循环遍历数组。
  3. 在每次迭代中，sum使用对象的值递增变量。
索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

let sum = 0;

for (let index = 0; index < arr.length; index++) {
  sum += arr[index].salary;
}

console.log(sum); // 👉️ 60

forEach()
此代码示例实现相同的结果，但是，我们使用基本循环而不是方法for。

我们必须使用每次迭代的索引，而不是直接访问元素。

这有点间接和混乱，但是，大多数开发人员习惯于阅读for循环。

您还可以结合使用Array.map()和Array.reduce()方法对对象数组中的属性求和。

map()使用and对对象数组中的属性求和reduce()

这是一个两步过程：

  1. 使用该Array.map()方法获取特定属性值的数组。
  2. 使用Array.reduce()方法对数组中的值求和。
索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

const sum = arr
  .map(obj => obj.salary)
  .reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 👉️ 60

我们传递给方法的函数Array.map()被数组中的每个元素（对象）调用。

在每次迭代中，我们访问该salary属性并返回其值。

索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

// 👇️ [ 10, 20, 30 ]
console.log(arr.map(obj => obj.salary));

该Array.map()方法返回一个仅包含指定属性值的新数组。

下一步是使用该Array.reduce()方法计算数组中值的总和。

索引.js
const arr = [
  {id: 1, salary: 10},
  {id: 2, salary: 20},
  {id: 3, salary: 30},
];

const sum = arr
  .map(obj => obj.salary)
  .reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 👉️ 60

我们用作变量0的初始值accumulator。

您选择哪种方法是个人喜好的问题。我会使用
Array.forEach()or 方法，Array.reduce()因为我发现这两个选项都非常直接且易于阅读。

额外资源

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