擴展沒有jQuery的JavaScript對象

Question

我有2個對象，例如：1st：

const langs = {
  en: {
    components: {
      test: 'test'
    },
  },
  de: {
    components: {
      test: 'test'
    },
  },
};

第二名：

const langs2 = {
  en: {
    app: {
      test: 'test'
    },
  },
  pl: {
    app: {
      test: 'test'
    },
  },
};

現在我需要將這兩個對象合並為一個，它看起來應該像：

{
  en: {
    components: {
      test: 'test'
    },
    app: {
      test: 'test'
    },
  },
  de: {
    components: {
      test: 'test'
    },
  },
  pl: {
    app: {
      test: 'test'
    },
  },
};

有解決方案嗎？ 我嘗試了Object.assign，但是當我有2個相同的命名屬性時，它將覆蓋它們。 因此，當我在2個對象中使用相同的lang時，應該對其進行擴展；當我使用不同的lang時，應將其添加到對象中。 我無法使用jquery或其他lib，因此它必須是純js（可使用ES6）

Answer 1

您可以使用一個名為deepmerge的小型庫：

 (function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.deepmerge = factory());}(this, (function () { 'use strict';var isMergeableObject = function isMergeableObject(value) {return isNonNullObject(value) && !isSpecial(value)};function isNonNullObject(value) {return !!value && typeof value === 'object'}function isSpecial(value) {var stringValue = Object.prototype.toString.call(value);return stringValue === '[object RegExp]' || stringValue === '[object Date]' || isReactElement(value)}/* see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25*/var canUseSymbol = typeof Symbol === 'function' && Symbol.for;var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;function isReactElement(value) {return value.$$typeof === REACT_ELEMENT_TYPE}function emptyTarget(val) {return Array.isArray(val) ? [] : {}}function cloneUnlessOtherwiseSpecified(value, options) {return (options.clone !== false && options.isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, options) : value}function defaultArrayMerge(target, source, options) {return target.concat(source).map(function(element) {return cloneUnlessOtherwiseSpecified(element, options)})}function mergeObject(target, source, options) {var destination = {};if (options.isMergeableObject(target)) {Object.keys(target).forEach(function(key) {destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);});}Object.keys(source).forEach(function(key) {if (!options.isMergeableObject(source[key]) || !target[key]) {destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);} else {destination[key] = deepmerge(target[key], source[key], options);}});return destination}function deepmerge(target, source, options) {options = options || {};options.arrayMerge = options.arrayMerge || defaultArrayMerge;options.isMergeableObject = options.isMergeableObject || isMergeableObject;var sourceIsArray = Array.isArray(source);var targetIsArray = Array.isArray(target);var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;if (!sourceAndTargetTypesMatch) {return cloneUnlessOtherwiseSpecified(source, options)} else if (sourceIsArray) {return options.arrayMerge(target, source, options)} else {return mergeObject(target, source, options)}}deepmerge.all = function deepmergeAll(array, options) {if (!Array.isArray(array)) {throw new Error('first argument should be an array')}return array.reduce(function(prev, next) {return deepmerge(prev, next, options)}, {})};var deepmerge_1 = deepmerge;return deepmerge_1; }))); const langs = { en: { components: { test: 'test' }, }, de: { components: { test: 'test' }, }, }; const langs2 = { en: { app: { test: 'test' }, }, pl: { app: { test: 'test' }, }, }; let result = deepmerge(langs, langs2); console.log(result); 

https://github.com/KyleAMathews/deepmerge