web-dev-qa-db-ja.com

if条件付きで配列マップを使用して結果をフィルター処理する

配列マップを使用してオブジェクトをさらにフィルタリングし、サーバーに送信して保存する準備をしようとしています。 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};

私の質問は-ヌルを入れずにこれを行う方法はありますか？読んでくれてありがとう！

javascriptangularjsmap
30
ajmajmajma

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

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

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

editすみません、コーヒーを飲んでいたのにコメントを逃しました-はい、jAndyがコメントで指摘したように、「id 「値、それは：

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

一部の機能ライブラリ（ Functional など）は、オブジェクトのリストからプロパティ値を抽出する.pluck()関数を持っていますが、ネイティブJavaScriptにはそのようなツールのかなり無駄のないセット。

64
Pointy

これを行うには Array.prototype.reduce を使用する必要があります。 little JS perf test を実行して、.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

注：2018年2月Reduce + Pushは、Chrome and Edgeで最速ですが、Filter + Firefoxのマップ

12
Justin L.

2019年に誰かがこれに遭遇した場合の情報を次に示します。

Reduce vs map + filterは、ループスルーする必要があるものに多少依存する可能性があると思います。これについてはわかりませんが、reduceは遅いようです。

確かなことの1つは、パフォーマンスの向上を求めている場合、コードの記述方法が非常に重要であることです。

ここではJS perfテスト これは、「falsey」値（例：if (string) {...}）を確認したり、ブール値が「falsey」値を返すのではなく、期待されています。

これが誰かを助けることを願っています

1
Laurynas