如何使用JavaScript的Array.reduce()按条件筛选数组元素

首先是你的原数组：

const records = [
  { value: 24, gender: "BOYS" },
  { value: 42, gender: "BOYS" },
  { value: 85, gender: "GIRLS" },
  { value: 12, gender: "GIRLS" },
  { value: 10, gender: "BOYS" }
];

可以通过reduce()方法实现需求，代码如下：

const boysRecords = records.reduce((acc, current) => {
  // 判断当前元素的gender是否为"BOYS"
  if (current.gender === "BOYS") {
    acc.push(current);
  }
  // 必须返回累加器，供下一次迭代使用
  return acc;
}, []); // 初始累加器设为空数组

console.log(boysRecords);
// 输出结果：[{value:24, gender:"BOYS"}, {value:42, gender:"BOYS"}, {value:10, gender:"BOYS"}]

逻辑说明 #

• reduce()的第一个参数是回调函数，接收两个核心参数：acc（累加器，用来存储最终结果）和current（当前遍历到的数组元素）。
• 我们把累加器的初始值设为空数组[]，每次遍历元素时，若元素的gender等于"BOYS"，就将该元素添加到累加器中。
• 每次迭代结束后必须返回累加器，这样它才能被传递到下一次迭代，最终得到筛选后的数组。

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