同时映射和过滤数组

Question

我有一个对象数组，我想对其进行迭代以生成一个新的过滤数组。而且，我需要根据参数从新数组中过滤掉一些对象。我正在尝试这个：

function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}

这是一个好方法吗？有没有更好的方法？我愿意使用任何库，例如 lodash。

Answer 1

您应该为此使用Array.reduce。

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

---

或者，reducer 可以是一个纯函数，像这样

var reduced = options.reduce(function(result, option) {
  if (option.assigned) {
    return result.concat({
      name: option.name,
      newProperty: 'Foo'
    });
  }
  return result;
}, []);

Answer 2

自 2019 年以来，Array.prototype.flatMap 是不错的选择。

options.flatMap(o => o.assigned ? [o.name] : []);

---

来自上面链接的 MDN 页面：

flatMap 可以用作添加和删除项目的一种方式（修改 地图期间的项目数）。换句话说，它允许您映射 许多项目对许多项目（通过分别处理每个输入项目）， 而不是总是一对一的。从这个意义上说，它的工作原理类似于 过滤器的对面。只需返回一个 1 元素数组来保留该项目， 用于添加项目的多元素数组，或用于删除的 0 元素数组 项目。

Answer 3

使用 reduce，卢克！

function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}

Answer 4

使用 ES6，你可以做的很短：

options.filter(opt => !opt.assigned).map(opt => someNewObject)

Answer 5

一行reduce 与 ES6 花哨spread syntax 在这里！

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);

Answer 6

我会发表评论，但我没有所需的声誉。对 Maxim Kuzmin 原本非常好的答案的一个小改进，以提高效率：

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, { name, assigned }) => assigned ? result.push(name) && result : result, []);

console.log(filtered);

说明

我们不是在每次迭代中一遍又一遍地传播整个结果，而是只追加到数组中，并且只有在实际有一个值要插入时。

Answer 7

在某些时候，使用forEach 是不是更容易（或同样容易）

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = []
options.forEach(function(option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     reduced.push(someNewValue);
  }
});

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

但是，如果有一个 malter() 或 fap() 函数结合了 map 和 filter 函数，那就太好了。它会像过滤器一样工作，除了返回 true 或 false 之外，它会返回任何对象或 null/undefined。

Answer 8

使用Array.prototy.filter 本身

function renderOptions(options) {
    return options.filter(function(option){
        return !option.assigned;
    }).map(function (option) {
        return (someNewObject);
    });   
}

Answer 9

我用以下几点优化了答案：

1. 将if (cond) { stmt; } 重写为cond && stmt;
2. 使用 ES6 Arrow Functions

我将介绍两种解决方案，一种使用forEach，另一种使用reduce：

解决方案 1：使用 forEach

该解决方案通过使用forEach 遍历每个元素来工作。然后，在forEach 循环的主体中，我们有条件充当过滤器，它决定我们是否要向结果数组附加一些东西。

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
const reduced = [ ];
options.forEach(o => {
  o.assigned && reduced.push( { name: o.name, newProperty: 'Foo' } );
} );
console.log(reduced);

解决方案 2：使用 reduce

此解决方案使用Array.prototype.reduce 而不是forEach 来遍历数组。它认识到reduce 具有内置的初始化程序和循环机制这一事实。除此之外，此解决方案与forEach 解决方案或多或少相同，因此差异归结为修饰语法糖。

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
const reduced = options.reduce((a, o) => {
  o.assigned && a.push( { name: o.name, newProperty: 'Foo' } );
  return a;
}, [ ] );
console.log(reduced);

由您决定采用哪种解决方案。

Answer 10

使用 reduce，您可以在一个 Array.prototype 函数中执行此操作。这将从数组中获取所有偶数。

var arr = [1,2,3,4,5,6,7,8];

var brr = arr.reduce((c, n) => {
  if (n % 2 !== 0) {
    return c;
  }
  c.push(n);
  return c;
}, []);

document.getElementById('mypre').innerHTML = brr.toString();

<h1>Get all even numbers</h1>
<pre id="mypre"> </pre>

您可以使用相同的方法并将其推广到您的对象，就像这样。

var arr = options.reduce(function(c,n){
  if(somecondition) {return c;}
  c.push(n);
  return c;
}, []);

arr 现在将包含过滤后的对象。

Answer 11

直接使用.reduce 可能难以阅读，因此我建议创建一个为您生成reducer 的函数：

function mapfilter(mapper) {
  return (acc, val) => {
    const mapped = mapper(val);
    if (mapped !== false)
      acc.push(mapped);
    return acc;
  };
}

像这样使用它：

const words = "Map and filter an array #javascript #arrays";
const tags = words.split(' ')
  .reduce(mapfilter(word => word.startsWith('#') && word.slice(1)), []);
console.log(tags);  // ['javascript', 'arrays'];

Answer 12

您可以使用Array.reduce 与箭头函数是单行代码

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const reduced = options.reduce((result, option) => option.assigned ? result.concat({ name: option.name, newProperty: 'Foo' }) : result, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

Answer 13

我已将这些出色的答案转换为实用函数，我想分享它们：

示例：仅过滤奇数并将其递增

• 例如[1, 2, 3, 4, 5] -filter-> [1, 3, 5] -map-> [2, 4, 6]

通常你会用 filter 和 map 这样做

const inputArray = [1, 2, 3, 4, 5];
const filterOddPlusOne = inputArray.filter((item) => item % 2).map((item) => item + 1); // [ 2, 4, 6 ]

---

使用reduce

const filterMap = <TSource, TTarget>(
  items: TSource[],
  filterFn: (item: TSource) => boolean,
  mapFn: (item: TSource) => TTarget
) =>
  items.reduce((acc, cur): TTarget[] => {
    if (filterFn(cur)) return [...acc, mapFn(cur)];
    return acc;
  }, [] as TTarget[]);

使用flatMap

const filterMap = <TSource, TTarget>(
  items: TSource[],
  filterFn: (item: TSource) => boolean,
  mapFn: (item: TSource) => TTarget
) => items.flatMap((item) => (filterFn(item) ? [mapFn(item)] : []));

用法（reduce 和 flatMap 解决方案相同）：

const inputArray = [1, 2, 3, 4, 5];
const filterOddPlusOne = filterMap(
  inputArray,
  (item) => item % 2, // Filter only odd numbers
  (item) => item + 1 // Increment each number
); // [ 2, 4, 6 ]

---

JavaScript 版本

上面的代码在 TypeScript 中，但问题是关于 JavaScript 的。所以，我已经为你删除了所有的泛型和类型：

const filterMap = (items, filterFn, mapFn) =>
  items.reduce((acc, cur) => {
    if (filterFn(cur)) return [...acc, mapFn(cur)];
    return acc;
  }, []);

const filterMap = (items, filterFn, mapFn) =>
  items.flatMap((item) => (filterFn(item) ? [mapFn(item)] : []));

Answer 14

同时执行filter + map 的最有效方法是将数据作为通用可迭代对象处理，并同时执行这两项操作。在这种情况下，您最多只能浏览一次数据。

下面的示例使用iter-ops 库，并且正是这样做的：

import {pipe, filter, map} from 'iter-ops';

const i = pipe(
    inputArray,
    filter(value => value === 123), // filter on whatever key you want
    map(value => /* any mapping here*/) // remap data as you like
);

// i = iterable that can be processed further;

console.log([...i]); //=> list of new objects

上面，我说的是at most，因为如果你对可迭代的结果应用进一步的逻辑，比如限制映射项的数量，你最终会迭代你的对象列表甚至少于一次：

const i = pipe(
    inputArray,
    filter(value => value === 123), // filter on whatever key you want
    map(value => /* any mapping here*/), // remap as you like
    take(10) // take up to 10 items only
);

在上面，我们进一步限制了迭代，一旦生成了 10 个结果项就停止，因此我们对数据的迭代次数少于一次。这已经是最有效的了。

更新

我被要求补充为什么这个解决方案比reduce 更有效的答案，所以这里是......

Array 的reduce 是一个有限运算，它遍历完整的数据集，以产生结果。因此，当您需要对该输出数据进行进一步处理时，您最终会生成一个新的迭代序列，依此类推。

当您有一个复杂的业务逻辑要应用于序列/可迭代对象时，链接该逻辑总是更有效，同时只对序列进行一次迭代。在许多情况下，您最终会对一个序列进行复杂的处理，甚至一次都没有检查完整的数据集。这就是可迭代数据处理的效率。

附：我是上述库的作者。

Answer 15

嘿，我刚刚从事这个项目，想在 MDM 文档上分享我基于 Array.prototype.flatMap() 的解决方案：

 const places = [
 {latitude: 40,longitude: 1}, {latitude:41, longitude:2}, {latitude:44, longitude:2}, {latitude:NaN, longitude:NaN },{ latitude:45, longitude:4},{latitude:48, longitude:3}, {latitude:44, longitude:5}, {latitude:39, longitude:13}, {latitude:40, longitude:8}, {latitude:38, longitude:4}
 ]
 
 let items = places?.map((place) => [
    {
      latitude: (place.latitude),

      longitude:(place.longitude),
    },
  ]);
   console.log("Items: ", items);
   
   //Remove elements with NaN latitude and longitude
   
    let newItems = places?.flatMap((o) =>
    Number(o.longitude, o.latitude)
      ? { lng: Number(o.longitude), lat: Number(o.latitude) }
      : []
  ); 
  
 console.log("Coordinates after NaN values removed: ", newItems);

一种