Mappare e filtrare un array contemporaneamente

Ho una matrice di oggetti su cui voglio scorrere per produrre una nuova matrice filtrata. Inoltre, ho bisogno di filtrare alcuni degli oggetti dal nuovo array in base a un parametro. Sto provando questo:

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

È un buon approccio? Esiste un metodo migliore? Sono aperto a usare qualsiasi biblioteca come lodash.

Dovresti usare Array.reduceper questo.

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>

In alternativa, il riduttore può essere una funzione pura, come questa

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

Usa riduci, Luke!

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

Dal 2019, Array.prototype.flatMap è una buona opzione.

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

Dalla pagina MDN collegata sopra:

flatMappuò essere usato come un modo per aggiungere e rimuovere elementi (modificare il numero di oggetti) durante una mappa. In altre parole, consente di mappare molti elementi su molti elementi (gestendo ciascun elemento di input separatamente), anziché sempre uno a uno. In questo senso, funziona come l'opposto del filtro. Restituisci semplicemente un array a 1 elemento per mantenere l'elemento, un array a più elementi per aggiungere elementi o un array a 0 elementi per rimuovere l'elemento.

Con ES6 puoi farlo in breve:

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

Una linea reducecon la sintassi di diffusione fantasia ES6 è qui!

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

Farei un commento, ma non ho la reputazione richiesta. Un piccolo miglioramento alla risposta molto buona di Maxim Kuzmin per renderla più efficiente:

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

Spiegazione

Invece di distribuire ripetutamente l'intero risultato per ogni iterazione, aggiungiamo solo all'array e solo quando c'è effettivamente un valore da inserire.

Usa Array.prototy.filter stesso

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

Ad un certo punto, non è più facile (o altrettanto facile) usare a 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>

Tuttavia sarebbe bello se ci fosse una malter()o una fap()funzione che combina le funzioni mape filter. Funzionerebbe come un filtro, tranne che invece di restituire vero o falso, restituirebbe qualsiasi oggetto o un valore nullo / indefinito.

Ho ottimizzato le risposte con i seguenti punti:

1. Riscrittura if (cond) { stmt; }comecond && stmt;
2. Utilizzare le funzioni freccia ES6

Presenterò due soluzioni, una che utilizza per ogni , l'altra che utilizza riduci :

Soluzione 1: utilizzare forOach

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

Soluzione 2: utilizzo di ridurre

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

Lascio a te decidere quale soluzione scegliere.

Usando riduci, puoi farlo in una funzione Array.prototype. Ciò recupererà tutti i numeri pari da un array.

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>

Puoi usare lo stesso metodo e generalizzarlo per i tuoi oggetti, in questo modo.

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

arr conterrà ora gli oggetti filtrati.

L'uso diretto di .reducepuò essere difficile da leggere, quindi ti consiglio di creare una funzione che generi il riduttore per te:

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

Usalo così:

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