合并2個物件的陣列，但如果屬性有相同的值，則將陣列連接起來

我有兩個物件，其結構如下：

我有兩個物件，其結構如下：

我想合并這個物件，得到一個有下一個結構的物件：

我想合并這個物件，得到一個有下一個結構的物件。

let merged = [
                    {
                        items: [
                            { items: [...
                                { id: '0', name: 'd' }, 
                                { id: '1', name: 'z' }]。
                              name: 'm' 
                            },
                            { items: [{ id: '2', name: 'q' }], name: 'l' },
                            { items: [{ id: '3', name: 'b' }], name: 'j' },
                        ],
                        name: 'c'
                    },
                    {
                        items: [
                            { items: [{ id: '4', name: '-' }], name: 'v' },
                        ],
                        name: 'd'/span>
                    }
                

也就是說，如果源陣列的名字在目標陣列中是相同的，我想獲得已加入陣列的物件。

我試著用lodash方法mergeWith，但我只能連接集合的上層項......

我試著用lodash方法mergeWith。

mergeWith(sourceObj, targetObj, (objValue, srcValue) => //span> {
          if (isArray（objValue）) {
            return objValue.concat（srcValue）。
          }
        });

uj5u.com熱心網友回復：

你是正確的，Lodash的mergeWith不會遞回地合并。你可以自己手動管理這個。

1. 首先，我們將迭代一個新的資料。
2. 首先迭代第一個陣列并通過name屬性生成一個map物件。
3. 然后遍歷第二個陣列，檢查name屬性是否匹配。 匹配，如果是的話，遞回呼叫merge函式來合并 源陣列和目標陣列的兩個嵌套陣列，否則，將第二個陣列的元素添加到 第二個陣列的元素添加到物件映射中。
。
4. 最后，將 地圖物件轉換為合并后的值的陣列。

代碼：

const merge = （sourceArr, targetArr）=> {
  // (1) 生成查找地圖。
  const objMap = sourceArr.reduce((map, curr) =>  {
    return {
      ...地圖。
      [curr.name]: curr
    };
  }, {});

  // (2) 合并物件，對專案陣列進行遞回。
  targetArr.forEach((obj) =>  {
    if (objMap[obj.name] ) {
      objMap[obj.name].items = merge(objMap[obj. name].items, obj.items）。)
    } else {
      objMap[obj.name] = obj;
    }
  });

  // (3) 回傳合并值陣列 return Object.values（objMap）。
};

顯示代碼片段

const sourceObj = [
  {
    items: [
      { items: [{ id: "0"/span>, name: "z" }], name: "m" },
      { items: [{ id: "2"/span>, name: "q" }], name: "l" }, name: "l" }
    ],
    name: "c"/span>
  },
  {
    items: [{ items: { id: "4"/span>, name: "-" }], name: "v" }]。
    name: "d" 
  }
];

const targetObj = [
  {
    items: [
      { items: [{ id: "1"/span>, name: "d"/span> }], name: "m" },
      { items: [{ id: "3"/span>, name: "b" }], name: "j" }, name: "j" }
    ],
    name: "c" 
  }
];

const merge = (sourceArr, targetArr) => {
  const objMap = sourceArr.reduce((map, curr) =>  {
    return {
      ...地圖。
      [curr.name]: curr
    };
  }, {});

  targetArr.forEach((obj) =>； {
    if (objMap[obj.name] ) {
      objMap[obj.name].items = merge(objMap[obj. name].items, obj.items）。)
    } else {
      objMap[obj.name] = obj;
    }
  });

  return Object.values（objMap）。
};

const res = merge（sourceObj, targetObj）;

console.log(res); 

CodePudding

我發現一劑相互遞回使得這里的代碼更加簡潔。

const combineItems =（o = {}, items）=>
  o .items || items .length ? {items: deepMerge (o.items || [], items)} : {} 

const deepMerge = (xs, ys) => 
  Object .values ([... xs, ... ys] .reduce (
    (a, {name, items = [], ...rest}) => ({
      ... a,
      [名稱]: {
        ... (a [name] || {name, ...rest})。
        ... combineItems (a [name], items)
      }
    }), {}
  ))

const sourceObj = [{items: [{items: [{id: "0"/span>, name: "z"}], name: "m"/span>}, {items: [{id: "2"/span>, name: "q"}], name: "l"}], name: "c"}, {items: [{items: [id: "4"/span>, name: "-"}], name: "v"}], name: "d"}]
const targetObj = [{items: [{items: [{id: "1"/span>, name: "d"}], name: "m"/span>}, {items: [{id: "3"/span>, name: "b"}], name: "j"}], name: "c"}]。

console .log (deepMerge (sourceObj, targetObj))/code>

.as-console-wrapper {max-height: 100% ！ important; top: 0}