Mapeie e filtre uma matriz ao mesmo tempo

Eu tenho uma matriz de objetos que quero iterar para produzir uma nova matriz filtrada. Mas também preciso filtrar alguns objetos da nova matriz, dependendo de um parâmetro. Estou tentando isso:

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

Essa é uma boa abordagem? Há um método melhor? Estou aberto a usar qualquer biblioteca como o lodash.

Você deve usar Array.reducepara isso.

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>

Como alternativa, o redutor pode ser uma função pura, como esta

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

Use reduzir, Luke!

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

Desde 2019, o Array.prototype.flatMap é uma boa opção.

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

Na página MDN vinculada acima:

flatMappode ser usado como uma maneira de adicionar e remover itens (modificar o número de itens) durante um mapa. Em outras palavras, ele permite mapear muitos itens para muitos itens (manipulando cada item de entrada separadamente), em vez de sempre individualmente. Nesse sentido, funciona como o oposto do filtro. Basta retornar uma matriz de 1 elemento para manter o item, uma matriz de vários elementos para adicionar itens ou uma matriz de 0 elementos para remover o item.

Com o ES6, você pode fazer isso muito brevemente:

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

Uma linha reducecom a sintaxe de propagação sofisticada do ES6 está aqui!

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);

Eu faria um comentário, mas não tenho a reputação necessária. Uma pequena melhoria na resposta muito boa de Maxim Kuzmin para torná-lo mais eficiente:

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

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

console.log(filtered);

Explicação

Em vez de espalhar o resultado inteiro repetidamente para cada iteração, apenas anexamos à matriz e somente quando há realmente um valor a ser inserido.

Use o próprio Array.prototy.filter

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

Em algum momento, não é mais fácil (ou tão fácil) usar um 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>

No entanto, seria bom se houvesse uma função malter()ou fap()que combine as funções mape filter. Funcionaria como um filtro, exceto que, em vez de retornar verdadeiro ou falso, retornaria qualquer objeto ou um nulo / indefinido.

Otimizei as respostas com os seguintes pontos:

1. Reescrevendo if (cond) { stmt; }comocond && stmt;
2. Use as funções de seta do ES6

Vou apresentar duas soluções, uma usando forEach , a outra usando o método reduzir :

Solução 1: Usando o forEach

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

Solução 2: usando reduzir

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

Deixo a você decidir qual solução escolher.

Usando reduzir, você pode fazer isso em uma função Array.prototype. Isso buscará todos os números pares de uma matriz.

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>

Você pode usar o mesmo método e generalizá-lo para seus objetos, assim.

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

arr agora conterá os objetos filtrados.

O uso direto de .reducepode ser difícil de ler, por isso recomendo criar uma função que gere o redutor para você:

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

Use-o assim:

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'];