javascript - 複数 - 条件付きの場合に配列マップを使用して結果をフィルタリングする




jquery フィルタリング 複数 (2)

.filter()関数を探しています:

  $scope.appIds = $scope.applicationsHere.filter(function(obj) {
    return obj.selected;
  });

これは、「選択された」プロパティがtrue (または真実)であるオブジェクトのみを含む配列を生成します。

私はコーヒーを飲んでいましたが、コメントを忘れてしまいました.JAndyがコメントに書いているように、フィルタリングして「id」値だけを抽出すると、

  $scope.appIds = $scope.applicationsHere.filter(function(obj) {
    return obj.selected;
  }).map(function(obj) { return obj.id; });

いくつかの機能ライブラリ(私の意見では十分な愛を得られないFunctionalようなもの)は、オブジェクトのリストからプロパティ値を抽出する.pluck()関数を持っていますが、ネイティブJavaScriptはかなりリーンなツールを持っています。

私は、サーバーに保存するために送信する準備をするためにオブジェクトを少しフィルタリングするために配列マップを使用しようとしています。 私は1つのキー値にフィルタすることができますが、それは素晴らしいですが、私はそれをさらに1ステップ進めて、ブール値の内部と照合したいと思います。

だから今はこれが私の持っているものです -

$scope.appIds = $scope.applicationsHere.map( function(obj){
        if(obj.selected == true){
            return obj.id;
        }
    });

これはIDの引き出しには効果的ですが、選択した値== falseの場合、この新しい配列にプッシュしたくないので、条件を追加してフィルタを適用します。 これはいくらか働いて、私はidの配列を取得しますが、.selected == falseを持つidはまだ配列の中にあり、nullの値だけです。 だから私はオブジェクトに4つのアイテムがあり、それらの2つがfalseの場合、これは次のようになります -

 appIds = {id1, id2, null, null};

私の質問は、そこにヌルを入れないでこれを行う方法があるということです。 読んでくれてありがとう!


これを行うには、 Array.prototype.reduceを使用する必要があります。 私は少しJSのperfテストをして、これが.filter + .map実行するよりもパフォーマンスが良いことを確認しました。

$scope.appIds = $scope.applicationsHere.reduce(function(ids, obj){
    if(obj.selected === true){
        ids.push(obj.id);
    }
    return ids;
}, []);

わかりやすくするために、JSPerfテストで使用したサンプル.reduceを次に示します。

  var things = [
    {id: 1, selected: true},
    {id: 2, selected: true},
    {id: 3, selected: true},
    {id: 4, selected: true},
    {id: 5, selected: false},
    {id: 6, selected: true},
    {id: 7, selected: false},
    {id: 8, selected: true},
    {id: 9, selected: false},
    {id: 10, selected: true},
  ];
  
  	
var ids = things.reduce((ids, thing) => {
  if (thing.selected) {
    ids.push(thing.id);
  }
  return ids;
}, []);

console.log(ids)

EDIT 1

注:2/2018現在、 Reduce + PushはChromeとEdgeでは最も高速ですが、FirefoxではFilter + Mapよりも遅いです





map