如何将多个对象合并为一个？

Question

我正在寻找一种将具有相同键的多个对象合并到一个大对象的方法。对象的数量可以超过 2 个。

例如我有这个代码：

const a = {
  en: {
    hello: 'Hello'
  },

  fr: {
    hello: 'Bonjour'
  }
}

const b = {
  en: {
    goodbye: 'Goodbye'
  },

  fr: {
    goodbye: 'Au revoir'
  }
}

如何将其合并到这个中：

{
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello',
      goodbye: 'Goodbye'
    },

    fr: {
      hello: 'Bonjour',
      goodbye: 'Au revoir'
    }
  }
}

Answer 1

当对象的数量是动态的时试试这个：

var o, k, v, n, A=[a,b], r={}
for(o in A) for(k in A[o]) if(!r[k]) r[k]={};
for(o in A) for(v in A[o]) for(n in A[o][v]) if(!r[v][n]) r[v][n]= A[o][v][n];
console.log(r);
console.log({locale: 'en',messages:r});

Answer 2

用于数组合并的函数mergeArray

const mergeArray = (firstArray, secondArray) => {
  return {
    locale: 'en',
    messages: {
      en: {
          ...firstArray.en,
          ...secondArray.en
      },
      fr: {
        ...firstArray.fr,
        ...secondArray.fr
      }
    }
  }
};

console.log(mergeArray(a, b));

下面的 sn-ps 会给你预期的输出。

const value = { locale: 'en', messages: { en: { ...a.en, ...b.en }, fr: { ...a.fr, ...b.fr } }};
console.log(value)

Answer 3

您可以对对象的每个级别使用深度合并功能。

函数deepMerge 用作给定目标的单个函数或用作Array#reduce 的回调，其中迭代对象数组并提供空对象作为startvalue 用于减少。

因此，您需要一个新对象并将合并对象分配为新属性messages。

function deepMerge(target, source) {
    Object.entries(source).forEach(([key, value]) => {
        if (value && typeof value === 'object') {
            deepMerge(target[key] = target[key] || {}, value);
            return;
        }
        target[key] = value;
    });
    return target;
}

var a = { en: { hello: 'Hello' }, fr: { hello: 'Bonjour' } },
    b = { en: { goodbye: 'Goodbye' }, fr: { goodbye: 'Au revoir' } },
    c = { locale: 'en', messages: [a, b].reduce(deepMerge, {}) };
    
console.log(c);

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

Answer 4

如果你想要一个新的对象，你可以使用 Object.Assign({}, a, b)

阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign