使用Array.reduce()模拟Array.filter()筛选数据时遇问题求助

问题描述 #

我在用Array.reduce()模拟Array.filter()的功能时遇到了输出偏差的问题。需求是：假设不存在Array.filter()方法，仅用Array.reduce()从给定数组中筛选出price属性大于等于10的对象，最终得到一个包含所有符合条件对象的新数组。

现有代码如下：

const gems = [
    { type: 'amethyst', price: 8 },
    { type: 'turquoise', price: 50 },
    { type: 'selenite', price: 2 },
    { type: 'topaz', price: 10 },
    { type: 'emerald', price: 500 }
]

const gemsOverTen = gems.reduce((acc, cur) => {
   if (cur.price < 10) return acc;
   if (cur.price >= 10) {
   return {
       ...acc,
        "type": cur.type, "price": cur.price
       }};
}, []);

console.log(gemsOverTen);

错误原因分析 #

你的代码核心问题是混淆了累加器的类型：初始值设的是数组[]，但在处理符合条件的元素时，却把累加器当成对象来解构合并，每次返回的都是一个新对象。这样做会导致两个问题：

1. 数组被转成对象，索引变成键名，结构完全错误；
2. 每次符合条件的对象都会覆盖之前的type和price属性，最终只会得到最后一个符合条件的对象，而非目标数组。

修正后的代码 #

正确的逻辑是让累加器始终保持数组类型：符合条件时将当前对象添加到数组中，不符合时直接返回原数组。

方式一：使用push修改累加器（性能更优） #

const gems = [
    { type: 'amethyst', price: 8 },
    { type: 'turquoise', price: 50 },
    { type: 'selenite', price: 2 },
    { type: 'topaz', price: 10 },
    { type: 'emerald', price: 500 }
]

const gemsOverTen = gems.reduce((acc, cur) => {
    if (cur.price >= 10) {
        acc.push(cur);
    }
    return acc;
}, []);

console.log(gemsOverTen);

方式二：使用展开运算符创建新数组（纯函数风格） #

如果你不想修改原累加器数组，可以用展开运算符生成新数组返回：

const gems = [
    { type: 'amethyst', price: 8 },
    { type: 'turquoise', price: 50 },
    { type: 'selenite', price: 2 },
    { type: 'topaz', price: 10 },
    { type: 'emerald', price: 500 }
]

const gemsOverTen = gems.reduce((acc, cur) => {
    return cur.price >= 10 ? [...acc, cur] : acc;
}, []);

console.log(gemsOverTen);

两种方式最终都会得到包含turquoise、topaz、emerald三个对象的数组，符合预期需求。

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