javascriptで2つの配列を後の配列優先でマージする方法を教えてください

Question

javascriptで2つの配列を後の配列優先でマージする方法を教えてください

javascriptで2つの連想配列のマージを効率良く実行する方法を教えて下さい。
から、2つの配列をマージをする方法で、順番を考える必要がでてきたのですがが、

後の配列のorderで、前の配列のorderを再構築をしたいと考えています。

(前提条件)
draggedRowData　<= tempRowData

わかるかたいらっしゃいましたら、ご教授お願いします。

下記のソースは2つの配列をマージしているのですが、tempRowData優先になっています。
その理由は　draggedRowData.find((e) => e.id === currentValue.id);　を使っているから、tempRowDataの順番でdraggedRowDataを取得してしまうところまでわかっているのですが。

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

let draggedRowData = [
    {id: 1, text: "TEST1", order: 2, isDeleted: false}, 
    {id: 2, text: "TEST4", order: 1, isDeleted: false}
];

const mergedRowData = tempRowData.reduce((accumulator, currentValue) => {
    let rData = draggedRowData.find((r) => r.id === currentValue.id );

    if (rData) {
        rData.order = index + 1;
        accumulator.push(rData);
    } else {
        currentValue.order = index + 1;
        accumulator.push(currentValue);
    }    

    return accumulator;
}, []);


tempRowData = mergedRowData;
console.log(tempRowData);

/*
現在
[
  { id: 1, text: 'TEST1', order: 1, isDeleted: false },
  { id: 2, text: 'TEST2', order: 2, isDeleted: false },
  { id: 3, text: 'TEST3', order: 3, isDeleted: true }
]

取得したいデータ
[
  { id: 2, text: 'TEST4', order: 1, isDeleted: false },
  { id: 1, text: 'TEST1', order: 2, isDeleted: false },
  { id: 3, text: 'TEST3', order: 3, isDeleted: true }
]
*/

追記

先にdraggedRowDataの順番とorderを入れ替えした。
reduceを修正して、reduce処理後に、sort、再連番して、期待する結果になりました、少し冗長になってしまったかもしれません。

もう少し効率の良いやりかたがあれば。

// 先にdraggedRowDataの順番とorderを入れ替えした。サンプルのため直接配列を書いてます。
let draggedRowData = [
    {id: 2, text: "TEST4", order: 1, isDeleted: false}
    {id: 1, text: "TEST1", order: 2, isDeleted: false}, 
];

let mergedRowData = tempRowData.reduce((accumulator, currentValue) => {
    let rData = draggedRowData.find((e) => e.id === currentValue.id);
    accumulator.push(rData ? rData : currentValue);
    return accumulator;
}, []);

// orderでソート
mergedRowData.sort((a, b) => {
    return a.order - b.order;
});

// 再連番
mergedRowData.forEach((currentValue, index) => {
    currentValue.order = index + 1;
});

tempRowData = mergedRowData;
console.log(tempRowData);

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

Comments

[Zuishin]

TEST2 が消えていますが、それで問題ないんでしょうか？

[退会済みユーザー]

コメントありがとうございます。
TEST2は上書きしてTEST4になります。

Answer 1

追記に関して、もっと簡潔に書きたいなら、

mapを使って

const mergedData = tempRowData.map(oldData => {
  const newData = draggedRowData.find(({ id }) => oldData.id === id)
  return newData ?? oldData
}).sort((current, next) => current.order > next.order ? 1 : -1)

読みにくいですが、returnを省略して一行で書きたいなら

const mergedData = tempRowData.map(oldData => draggedRowData.find(({ id }) => oldData.id === id) ?? oldData).sort((current, next) => current.order - next.order)

reduceが使いたいなら

const mergedData = tempRowData.reduce((accumulator, currentValue) => {
  const newData = draggedRowData.find(({ id }) => currentValue.id === id)
  return [...accumulator, newData ?? currentValue]
}, []).sort((current, next) => current.order > next.order ? 1 : -1)

同じ要領で一行で書きたいなら

const mergedData = tempRowData.reduce((accumulator, currentValue) => [...accumulator, draggedRowData.find(({ id }) => currentValue.id === id) ?? currentValue], []).sort((current, next) => (current.order - next.order))

のような感じになるかと思います。

Comments

[退会済みユーザー]

コメントありがとうございます。
なるほど、そんな書き方があるんですね。

元の配列とサイズは変えないですし、reduceよりmapのほうがシンプルな感じはしますね！

例もnewDataとoldDataに分けて書いてあるのでとてもわかりやすかったです

mapのreturnを省略しないほうのやり方でやりたいと思います。