Asigne y filtre una matriz al mismo tiempo

Tengo una matriz de objetos que quiero iterar para producir una nueva matriz filtrada. Pero también, necesito filtrar algunos de los objetos de la nueva matriz dependiendo de un parámetro. Estoy intentando esto:

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

¿Es ese un buen enfoque? hay algun metodo mejor? Estoy abierto a usar cualquier biblioteca como lodash.

Deberías usar Array.reducepara esto.

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>

Alternativamente, el reductor puede ser una función pura, como esta

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

¡Usa reducir, Luke!

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

Desde 2019, Array.prototype.flatMap es una buena opción.

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

Desde la página MDN vinculada anteriormente:

flatMapse puede usar como una forma de agregar y eliminar elementos (modificar el número de elementos) durante un mapa. En otras palabras, le permite asignar muchos elementos a muchos elementos (manejando cada elemento de entrada por separado), en lugar de siempre uno a uno. En este sentido, funciona como lo opuesto al filtro. Simplemente devuelva una matriz de 1 elemento para mantener el elemento, una matriz de múltiples elementos para agregar elementos o una matriz de 0 elementos para eliminar el elemento.

Con ES6 puedes hacerlo muy corto:

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

¡Una línea reducecon la sintaxis elegante de ES6 está aquí!

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

Haría un comentario, pero no tengo la reputación requerida. Una pequeña mejora a la muy buena respuesta de Maxim Kuzmin para que sea más 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);

Explicación

En lugar de distribuir el resultado completo una y otra vez para cada iteración, solo agregamos a la matriz, y solo cuando realmente hay un valor para insertar.

Utilice Array.prototy.filter en sí

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

En algún momento, ¿no es más fácil (o igual de fácil) usar un 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>

Sin embargo, sería bueno si hubiera una función malter()o fap()que combine las funciones mapy filter. Funcionaría como un filtro, excepto que en lugar de devolver verdadero o falso, devolvería cualquier objeto o un valor nulo / indefinido.

Optimicé las respuestas con los siguientes puntos:

1. Reescribiendo if (cond) { stmt; }comocond && stmt;
2. Usar funciones de flecha ES6

Presentaré dos soluciones, una usando forEach , la otra usando reduce :

Solución 1: uso de 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);

Solución 2: usando reduce

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

Te dejo a ti decidir qué solución elegir.

Usando reduce, puede hacer esto en una función Array.prototype. Esto buscará todos los números pares de una 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>

Puede usar el mismo método y generalizarlo para sus objetos, de esta manera.

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

arr ahora contendrá los objetos filtrados.

El uso directo de .reducepuede ser difícil de leer, por lo que recomiendo crear una función que genere el reductor para usted:

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

Úselo así:

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