配列のマッピングとフィルタリングを同時に行う

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

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

それは良いアプローチですか？より良い方法はありますか？lodashなどの任意のライブラリを使用できます。

このために使用する必要があります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>

または、レデューサーは次のように純粋な関数にすることもできます

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

ルーク、リデュースを使って！

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

2019年以降、Array.prototype.flatMapが適切なオプションです。

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

上記のMDNページから：

flatMapマップ中にアイテムを追加および削除する（アイテム数を変更する）方法として使用できます。つまり、常に1対1ではなく、（各入力項目を個別に処理することにより）多くの項目を多くの項目にマップできます。この意味で、フィルターの逆のように機能します。1要素の配列を返してアイテムを保持するか、複数要素の配列を返してアイテムを追加するか、0要素の配列を返してアイテムを削除します。

ES6を使用すると、非常に短時間で実行できます。

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

reduceES6ファンシースプレッド構文の 1行がここにあります！

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

私はコメントしますが、必要な評判がありません。マキシムクズミンの小さな改善、それ以外の場合は非常に良い答えをより効率的にする：

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

説明

反復ごとに結果全体を何度も分散するのではなく、実際に挿入する値がある場合にのみ、配列に追加するだけです。

Array.prototy.filter自体を使用する

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

ある時点で、より簡単に（または同じくらい簡単に） 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>

ただし、and 関数を組み合わせたmalter()or fap()関数があったらいいですね。フィルターのように機能しますが、trueまたはfalseを返す代わりに、オブジェクトまたはnull /未定義を返します。mapfilter

私は次の点で答えを最適化しました：

1. if (cond) { stmt; }として書き換えcond && stmt;
2. ES6の矢印関数を使用する

2つのソリューションを提示します。1つはforEachを使用し、もう1つはreduceを使用します。

解決策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：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);

どの解決策をとるかはあなたに任せています。

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

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>

同じ方法を使用して、次のようにオブジェクトに一般化できます。

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

arr これで、フィルタリングされたオブジェクトが含まれます。

の直接使用は.reduce読みにくい場合があるため、レデューサーを生成する関数を作成することをお勧めします。

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

次のように使用します。

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