如何在JavaScript中用reduce函数处理嵌套数组及计算用户年龄总和

Hey there! Let's tackle your two JavaScript questions one by one, with clear examples and explanations tailored to real-world use cases.

reduce() is a super flexible tool for working with nested arrays because it lets you build up a custom result (like a flattened array, a count object, or a sum) by iterating through each element and updating an accumulator. Here are two common practical scenarios:

Flattening a multi-level nested array #

If you need to turn a deeply nested array into a single-level list, combine reduce() with recursion:

const nestedArr = [1, [2, [3, 4], 5], 6];

const flattenArray = arr => {
  return arr.reduce((accumulator, currentItem) => {
    // Check if the current element is an array—if yes, recursively flatten it
    // If not, add it directly to the accumulator
    return accumulator.concat(Array.isArray(currentItem) ? flattenArray(currentItem) : currentItem);
  }, []); // Start with an empty array as the initial accumulator
};

console.log(flattenArray(nestedArr)); // Output: [1, 2, 3, 4, 5, 6]

Counting element occurrences across nested arrays #

Want to tally how often each value appears across all subarrays? reduce() can handle that with a little extra iteration:

const nestedData = [['a', 'b'], ['a', 'c'], ['b', 'c', 'a']];

const countElementOccurrences = arr => {
  return arr.reduce((accumulator, currentSubarray) => {
    // Loop through each item in the current subarray to update counts
    currentSubarray.forEach(item => {
      accumulator[item] = (accumulator[item] || 0) + 1;
    });
    return accumulator;
  }, {}); // Start with an empty object to store counts
};

console.log(countElementOccurrences(nestedData)); // Output: { a: 3, b: 2, c: 2 }

The core idea here is to check if the current element is a nested array, then either process it recursively or iterate through its items to update your accumulator.

Given your users array, there are several straightforward ways to get the total age—including reduce() and simpler imperative alternatives. Let's break them down:

Using reduce() (clean functional approach) #

This is the most concise way to handle it in a functional style:

const users = [ {name: "Julia", age: 20}, {name: "Jane", age: 30} ];

const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // Output: 50

We start with an initial sum of 0, then add each user's age to the sum in every iteration.

Alternative methods #

If you prefer a more explicit, imperative style, these work just as well:

• Using forEach():

  let totalAge = 0;
  users.forEach(user => totalAge += user.age);
  console.log(totalAge); // 50
  

• Using for...of loop:

  let totalAge = 0;
  for (const user of users) {
    totalAge += user.age;
  }
  console.log(totalAge); // 50
  

• Using map() + reduce() (overkill here, but useful for understanding method chaining):

  const totalAge = users.map(user => user.age).reduce((a, b) => a + b, 0);
  console.log(totalAge); // 50
  

内容的提问来源于stack exchange，提问作者Elcan