在没有jquery

Question

我有2个对象，例如： 第1名：

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它应该只是添加到object。我不能使用jquery或其他lib，所以它必须是纯js（es6 avaible）

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