javascriptで2つの連想配列のマージを効率良く実行する方法を教えて下さい。

Question

javascriptで2つの連想配列のマージを効率良く実行する方法を教えて下さい。

下記のソースコードでは
tempRowDataにrowDataを上書きしています。
実際のデータは最大1000行程度になります。
2つの連想配列の関係性は　tempRowData >= rowData　となります。

第1ループでmapを使用し、第2ループでsome(forEachでbreakができないための代用)をしています。
someで抜けたらそのrowDataの該当indexは次のtempRowDataのループで使用しないため削除しています。

Object.assignを使ってマージする方法もあるようですが、2つの合算になるだけのため使いませんでした。

仕様の説明を追加しました。
・tempRowDataに対してrowDataのidが合致する場合に上書きします。
・rowDataのidは常にtempRowDataに存在
・tempRowDataのidがrowDataに存在しないことがある(isDeleted: trueの場合に存在しない)

var tempRowData = [
    {id: 1, text: "TEST1", isDeleted: false}, 
    {id: 2, text: "TEST2", isDeleted: false}, 
    {id: 3, text: "TEST3", isDeleted: true}
];

var rowData = [
    {id: 1, text: "TEST1", isDeleted: false}, 
    {id: 2, text: "TEST4", isDeleted: false}
];

if (rowData.length) {
    var result = tempRowData.map((item) => {
        var temp = null;
        var tempIndex = null;
        rowData.some((item2, index2) => {
            if (item["id"] == item2["id"]) {
                temp = item2;
                tempIndex = index2;
                return true;
            }
        });

        if (temp != null) {
            rowData.splice(tempIndex, 1);
            return temp;
        }

        return item;
    });

    tempRowData = result;
}

/*
    結果
    tempRowData = [
        {id: 1, text: "TEST1", isDeleted: false}, 
        {id: 2, text: "TEST4", isDeleted: false}, 
        {id: 3, text: "TEST3", isDeleted: true}
    ]
*/

Comments

[yambejp]

仕様をもうすこしはっきりとしてください
・tempRowDataとrowDataのキーはすべて同じ
・tempRowDataに対してrowDataをidが合致する場合上書き
・rowDataのidは常にtempRowDataにも存在するが、
tempRowDataのidがrowDataに存在するとは限らない。

[退会済みユーザー]

コメントありがとうございます。
仕様追加させて頂きました。

[yambejp]

論理的な意味で、isDeleted:true、つまり削除済みのデータについては
textはnullとかにすべきでは？

[退会済みユーザー]

ご指摘ありがとうございます。
論理的な部分については検討させて頂きます。

Answer 1

冗長にやるなら

rowData.forEach(x=>{
  tempRowData.forEach(y=>{
    if(y.id==x.id){
      y.text=x.text;
      y.isDeleted=x.isDeleted;
    }
  });
});
console.log(tempRowData);

Comments

[退会済みユーザー]

コメントありがとうございます。
元の冗長なコードより良いですね。

Answer 2

やってることはほとんど同じですが、reduceを使ってはどうでしょうか？

var tempRowData = [
    {id: 1, text: "TEST1", isDeleted: false}, 
    {id: 2, text: "TEST2", isDeleted: false}, 
    {id: 3, text: "TEST3", isDeleted: true}
];

var rowData = [
    {id: 1, text: "TEST1", isDeleted: false}, 
    {id: 2, text: "TEST4", isDeleted: false}
];

const mergedData = tempRowData.reduce((acc, cur) => {
    const rData = rowData.find((r) => r.id === cur.id );
    acc.push(rData? rData : cur);
    return acc;
}, []);

tempRowData = mergedData;
console.log(tempRowData);

[
  { id: 1, text: 'TEST1', isDeleted: false },
  { id: 2, text: 'TEST4', isDeleted: false },
  { id: 3, text: 'TEST3', isDeleted: true }
]

Comments

[退会済みユーザー]

コメントありがとうございます。
reduceを使う方法も考えていましたが、nekonikiさんに書いて頂いたコードの方法は思いつきませんでした。
一度ためさせて頂きます。

[退会済みユーザー]

reduceとfindを組み合わせる方法には気がつきませんでした。

findを使うと　連想配列から指定したidのデータを取得
三項演算子で見つかった場合はそのデータ、そうでなければ自分自身のデータを追加

なるほど！とても勉強になりました。

ベストアンサーとさせて頂きます。

ありがとうございました。

Answer 3

idの値をキーにしたMapにtempRowDataとrowDataの中身を順次投入して、最後に配列へ変換する、という方法はどうでしょうか？

Comments

[退会済みユーザー]

ありがとうございます。
その方法でも一度トライしてみます。