Map und Filter ein Array zur gleichen Zeit in Javascript

Question

Ich habe ein Array von Objekten, die ich durchlaufen, um ein neues gefiltertes Array zu erzeugen. Aber auch, ich muss einige der Objekte aus dem neuen Array abhängig von einem Parameter herausfiltern. Ich versuche das:

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

Ist das ein guter Ansatz? Gibt es eine bessere Methode? Ich bin offen, irgendeine Bibliothek wie lodash zu benutzen.

Answer 1

sollten Sie Array.reduce für diese.

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>

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 2

Verwenden Array.prototy.filter selbst

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

Answer 3

Verwendung reduzieren, Luke!

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

Answer 4

Mit reduce können Sie dies in einer Array.prototype-Funktion tun. Dies wird alle geraden Zahlen von einem Array abrufen.

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

 
var brr = arr.reduce(function(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>

können Sie die gleiche Methode verwenden und verallgemeinern es für Ihre Objekte, wie diese.

arr enthält jetzt die gefilterten Objekte.

Answer 5

Mit ES6 können Sie es sehr kurz:

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

Answer 6

An einem gewissen Punkt ist es nicht einfacher (oder einfach nur so einfach) zu verwenden, um ein 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>

Es wäre aber nett, wenn es eine malter() odergäbeFunktion, die die map und filter Funktionen kombiniert. Es würde wie ein Filter funktionieren, außer dass es statt true oder false ein beliebiges Objekt oder ein null/undefined zurückgibt.

Answer 7

optimiert ich die Antworten mit den folgenden Punkten:

1. if (cond) { stmt; } als cond && stmt;
2. Verwenden ES6 Arrow Functions

Umschreiben werde ich zwei Lösungen präsentieren, ein forEach verwendet, das andere mit reduce :

Solut Ion 1: Verwendung 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);

Lösung 2:

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

reduzieren Verwenden ich es verlassen, um Ihnen zu entscheiden, welche Lösung gehen Sie für.