在Javascript中同时映射和过滤数组

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>

更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 2

使用减少,卢克!

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

Answer 3

使用ES6,您可以做到非常简短:

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

Answer 4

我会发表评论，但我没有所需的声誉。对马克西姆·库兹明 (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 5

Array.prototype.flatMap是另一个选项。

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

在上面链接的MDN页面上：

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

Answer 6

reduceES6花式扩展语法的一行就在这里!

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 7

我通过以下几点优化了答案：

1. 重写if (cond) { stmt; }为cond && stmt;
2. 使用 ES6箭头函数

我将提出两种解决方案，一种使用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 8

使用Array.prototy.filter本身

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

Answer 9

在某些时候，是不是更容易（或同样容易）使用 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()orfap()函数结合了mapandfilter函数，那就太好了。它会像过滤器一样工作，除了返回 true 或 false 之外，它会返回任何对象或 null/undefined。