配列（内はJSON）同士を条件によって結合したい

Question

前提・実現したいこと

for文の中にfor文をいれる方法しか思いつかず、
データ量が増えた際に処理が重くなってしまうのではないかと思い
スマートな記述方法をご教示願います。

データ

下記２つの配列を条件によって結合させたいです。

■条件

• idが同じ
• 必要なkey, valueだけ取り出す（id, name, age）

const arrayA = [
    {"id": "1", "name": "a", "hoge": "hoge"},
    {"id": "2", "name": "b", "hoge": "hoge"},
    {"id": "3", "name": "c", "hoge": "hoge"},
    {"id": "4", "name": "d", "hoge": "hoge"},
    {"id": "5", "name": "e", "hoge": "hoge"},
    {"id": "6", "name": "f", "hoge": "hoge"}
 ]
const arrayB = [
    {"id": "3", "age": "10"},
    {"id": "6", "age": "20"}
]


// expected output:
// [
//   {"id": "1", "name": "a", "age": null},
//   {"id": "2", "name": "b", "age": null},
//   {"id": "3", "name": "c", "age": "10"},
//   {"id": "4", "name": "d", "age": null},
//   {"id": "5", "name": "e", "age": null},
//   {"id": "6", "name": "f", "age": "20"}
// ]

ご回答いただけると幸いです。よろしくお願いします。

Comments

[m.ts10806]

＞スマートな記述方法をご教示願います。
まず自身が思うようにやってみた結果をご提示ください。
なにも提示しないまま作業依頼に近しい内容になってます。

[yambejp]

・arrayAのhogeは不要
・ageはarrayBにあればその値、なければnull

という条件ですね？

[kuma_kuma_]

この質問は
arrayA に arrayB の内容を追加する
arrayB に arrayA の内容を追加する
arrayA と arrayB の内容で arrayC を作成する
どれに該当しますか？

今回結果としては2重ループにはならないと思いますが
相当量が無いと処理が遅くなることはないかと思います
for(var i = 0; i < 10000; i++){
for(var j = 0; j < 10000; j++){
}
}
試してみて下さい。

[kito-chall]

ご意見・ご協力ありがとうございます。
次回からは具体的に何を試したのか記載していきたいと思います。

[m.ts10806]

質問は編集できるので、いつ来るかわからない次回に回すより、今対応されたほうが良いと思います。
結局のところ他者には質問に書いてあることが全てです。

Answer 1

データ量が増えた際に処理が重くなってしまうのではないかと思い

arrayA の代わりに 10万件のデータを機械的に作成してみました。

var makeList = ( max ) => Array.from({ length:max },
  (_,i) => ({id:i, name:"name"+i, note:"note"+i})
);
var list = makeList( 100000 ); // 10万件のダミーデータ生成
console.log( list ); 

console.time()/ console.timeEnd() で for - for の処理速度を確かめてみてください。

近年の端末は高性能ですし、モダンブラウザのJavaScript実行速度も無駄がない限り
相当な件数を扱う事にでもならない限りストレスを感じることはないと思いますが、ユーザの環境に依存します。

※10万件は、100件ずつ表示して1000ページであり、「人の手作業による確認作業」を考えると苦痛にも感じる件数です。
この件数だと、サーバー側でDBを使うのが現実的でしょうし、DBから読み込んだ情報に付与して上書きするなどの方法で、一気に処理するのではなく、更新の遅延を許容する仕組みにしても良いと思います。

スマートな記述方法をご教示願います。

for文の中にfor文をいれる方法 は反復処理の基礎になります。
これが出来ているなら、Array の各種メソッドを使って反復処理を置き換える事を考えてください。

var arrayB = [
    {"id": "3", "age": "10"},
    {"id": "6", "age": "20"}
];

// 1. id をプロパティ名に持った key-value を作る
// Map オブジェクトを使うとよりモダンになると思いますが、古典的にObjectを作る。
var keyval = arrayB.reduce( (rslt, entry) =>
   (rslt[entry.id] = entry, rslt), {});
console.log( keyval );
/*
  => {
    3: {"id": "3", "age": "10"},
    6: {"id": "6", "age": "20"}
  }
 */

// 2. 上記ダミーデータを総当りしつつ、全配列要素に age プロパティを付与する
var merged = list.map( entry =>
   Object.assign(entry, {age:null}, kv[entry.id]) );
console.log( merged );

※すでに回答が出ていますが、各配列要素をどのように処理するかが重要と思います。（追記

Comments

[kito-chall]

詳細かつ、丁寧にご回答いただきありがとうございます。
大変勉強となりましたのでこちらをベストアンサーとさせていただければと思います。

Answer 2

const result=arrayA.map(x=>({id:x.id,name:x.name,age:arrayB.filter(y=>y.id==x.id)[0]?.age||null}));
console.log(result);

Comments

[kito-chall]

スマートなご回答をいただきありがとうございます。
私基準で大変、申し訳ございませんが、データ件数についても回答してくださった方をベストアンサーとさせていただきました。