Javascriptで同時に配列をマップしてフィルタリングする

Question

新しいフィルタリングされた配列を生成するために反復処理するオブジェクトの配列があります。しかし、私はパラメータに応じて、新しい配列のオブジェクトのいくつかをフィルタリングする必要があります。私はこれを試しています：

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

これは良いアプローチですか？より良い方法はありますか？私はロダッシュのようなライブラリを使用するために開いています。

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

使用Array.prototy.filter自体

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

Answer 3

使用、ルークを軽減！

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

Answer 4

reduceを使用すると、1つのArray.prototype関数でこれを行うことができます。これにより、配列からすべての偶数がフェッチされます。

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>

あなたは、同じメソッドを使用してこのように、あなたのオブジェクトのためにそれを一般化することができます。

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

arrにフィルタリングされたオブジェクトが含まれるようになりました。

ES6で

Answer 5

あなたは非常に短いそれを行うことができます。

いくつかの時点でoptions.filter(opt => !opt.assigned).map(opt => someNewObject)

Answer 6

、それが簡単に（または同じように簡単）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()またはがあればいいですは、mapとfilterの機能を組み合わせた関数です。 trueまたはfalseを返す代わりに、オブジェクトまたはnull/undefinedが返されます。

Answer 7

私は以下の点で答え最適化：私はreduceを使用して2つのソリューション、forEachを使用して1、他を提示しますif (cond) { stmt; }

cond && stmt;として使用ES6 Arrow Functions に

を書き換え

1. を：

   Solutイオン1：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);

   ソリューション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);

   を減らしますをやる。