のJavascript -

Question

2つの配列を一緒に「マッピング」するよりefficentの方法Iは、（私はいくつかのユーザー入力に基づいて、サーバから受信する）2つのオブジェクトの配列を有する：両方の配列に

array1 = [{id:1, name:Bob}, {id:2, name:John}, {id:3, name:Mary}]; 
array2 = [{id:2, field:true},{id:2, field:true}, {id:3, field:false}]; 

IDを互いに対応（ユーザーIDです）。実際の生活では、これらの配列ははるかに大きくなります（配列1では8000要素まで、配列2では16000まで）。

私が達成する必要があるのはフロントエンドです。私は現在、ユーザーIDとフィールドに表示されているarray2情報を表示しています。問題はフロントエンドユーザーが自分のユーザーIDで誰かを知らず、名前で知っていることです。私はこのようなオブジェクトを持つ配列が必要です：{id:'',name:'',field:''}。

私が最初に考えたのは、「二つの配列を組み合わせた」新しい配列を作成してすることでした：

var new_array = []; 

for (var i = 0; i < array2.length; i++) { 
    var name = 'Unknown'; 
    for (var j = 0; j < array1.length; j++) { 

    if (array1[j].id === array2[i].id) { 
     name = array1[j].name; 
    } 

    this.new_array.push({ 
     id: array2[i].id, 
     name: name, 
     field: array1[j].field 
    }); 
    } 
} 

だから私二番目の配列をループし、idは最初のアレイのIDと一致するかどうかを確認します。もしそうであれば、私は最初の配列から名前を取ります。それがユーザーの名前ですので、ユーザーの名前を取得します。

これは機能しますが、フロントエンドでは遅いですが、これを行うには数秒かかります。多くのアイテムがある場合は、ユーザーエクスペリエンスが気に入らず、待っています。私は私がする必要があることをするより効率的な方法を探しています。

Answer 1

1つのアレイを介して実行し、エントリにID値をマッピングするオブジェクトを作成します。

var new_array = []; 
for (var i = 0; i < array1.length; i++) { 
    var v2 = array2idx[array1[i].id]; 
    if (v2) { 
    new_array.push({ 
     id: v2.id, 
     name: array1[i].name, 
     field: array1[i].field 
    }); 
    } 
} 

かなり速くする必要があります：

var array2idx = array2.reduce(function(map, value) { 
    map[value.id] = value; 
    return map; 
}, {}); 

を今、あなたは簡単な検索でarray2値を見つけることができます。インデックスオブジェクト内のIDを調べるには、ほとんど時間がかかりません。