使用 AngularJS 深度合并对象

IT技术 javascript angularjs
2021-02-24 03:16:07

通常我会使用浅拷贝对象 angular.extend()

这是一个例子:

var object1 = {
  "key": "abc123def456",
  "message": {
    "subject": "Has a Question",
    "from": "example1@example.com",
    "to": "example2@example.com"
   }
};

var object2 = {
  "key": "00700916391"
};

console.log(angular.extend({}, object1, object2));

会给我们:

{
 "key": "00700916391",
 "message": {
   "subject": "Has a Question",
   "from": "example1@example.com",
   "to": "example2@example.com"
  }
}

但是如果我想合并对象以便父键不会被子对象覆盖怎么办:

var object1 = {
  "key": "abc123def456",
  "message": {
    "subject": "Has a Question",
    "from": "example1@example.com",
    "to": "example2@example.com"
   }
};

var object2 = {
  "key": "00700916391",              //Overwrite me
  "message": {                       //Dont overwrite me!
    "subject": "Hey what's up?",     //Overwrite me
    "something": "something new"     //Add me
   }
};

console.log(merge(object1, object2));

会给我们:

{
 "key": "00700916391",
 "message": {
   "subject": "Hey what's up?",
   "from": "example1@example.com",
   "to": "example2@example.com",
   "something": "something new"
  }
}
  • 是否有一个 Angular 函数已经进行了我不知道的深度合并?

  • 如果没有,是否有一种本地方法可以在 javascript 中递归执行 n 级深度?

5个回答

Angular 1.4 或更高版本

使用angular.merge

与 不同extend()merge()递归下降到源对象的对象属性,执行深度复制。

angular.merge(object1, object2); // merge object 2 into object 1

旧版本的 Angular:

简单的递归算法没有理由不工作:)

假设它们都是 JSON.stringify 或类似的结果:

function merge(obj1,obj2){ // Our merge function
    var result = {}; // return result
    for(var i in obj1){      // for every property in obj1 
        if((i in obj2) && (typeof obj1[i] === "object") && (i !== null)){
            result[i] = merge(obj1[i],obj2[i]); // if it's an object, merge   
        }else{
           result[i] = obj1[i]; // add it to result
        }
    }
    for(i in obj2){ // add the remaining properties from object 2
        if(i in result){ //conflict
            continue;
        }
        result[i] = obj2[i];
    }
    return result;
}

这是一个工作小提琴

(注意,这里不处理数组)

我认为这个合并函数并不能真正替代 1.4 中的 angular.merge 函数。合并的目的是深入扩展一个对象。您的解决方案会创建一个新对象(结果),而 obj1 不会以任何方式更改。
2021-04-21 03:16:07
你省略了一个var声明i-var result = {}, i;
2021-04-24 03:16:07
@hooblei 感谢您的注意,在像 SO markdown 编辑器这样的无 jshint 环境中编写代码时,我总是犯这样的错误。我已经修好了 - 不错的收获。
2021-04-28 03:16:07
@DanKanze 而不是obj2在第二个循环中循环而是将for... in包装在另一个循环中arguments(不要从 0 开始索引,你想跳过第一个对象:)(它不是答案的一部分的原因,是同样的原因为什么没有深度限制或数组处理 - 它使简单的答案与细节复杂化)如果您在实现这一点时遇到问题 - 欢迎您在 JS 室与我讨论这个问题。
2021-05-16 03:16:07
现在,真正酷的是,如果您可以将n对象作为参数传递angular.extend()工作原理类似......迎接挑战?:)
2021-05-20 03:16:07

在新版本的 Angularjs 中,他们添加了合并功能,该功能将执行深度复制。

对于旧版本,我通过从新版本的 Angularjs 复制合并函数的代码来创建我的自定义函数。下面是相同的代码,

function merge(dst){
  var slice = [].slice;
  var isArray = Array.isArray;
  function baseExtend(dst, objs, deep) {
    for (var i = 0, ii = objs.length; i < ii; ++i) {
      var obj = objs[i];
      if (!angular.isObject(obj) && !angular.isFunction(obj)) continue;
      var keys = Object.keys(obj);
      for (var j = 0, jj = keys.length; j < jj; j++) {
        var key = keys[j];
        var src = obj[key];
        if (deep && angular.isObject(src)) {
          if (!angular.isObject(dst[key])) dst[key] = isArray(src) ? [] : {};
          baseExtend(dst[key], [src], true);
        } else {
          dst[key] = src;
        }
      }
    }

    return dst;
  }
  return baseExtend(dst, slice.call(arguments, 1), true);
}

希望这能帮助那些想知道为什么 angular.merge 在旧版本中不起作用的人。

几乎......我最终编码的是: if (!angular.hasOwnProperty('merge')) { angular.merge = function(dst) { ... } }
2021-05-11 03:16:07
我已经给你投票了,因为这是最好的答案,因为它使用了角度代码的修改版本。也许你可以添加像“if(angular.hasOwnProperty('merge'))return angular.merge.apply(angular, arguments);”这样的一行。这意味着在可用时使用原生 Angular 版本,在使用 <1.4 时使用 polyfill 版本。
2021-05-12 03:16:07
注意 baseExtend() 中的这个 1.4 错误... geekswithblogs.net/shaunxu/archive/2015/05/29/ ...将 Dates() 视为对象并错误地尝试合并它们
2021-05-19 03:16:07

angular.merge polyfill for angular < 1.4.0

if (!angular.merge) {
  angular.merge = (function mergePollyfill() {
    function setHashKey(obj, h) {
      if (h) {
        obj.$$hashKey = h;
      } else {
        delete obj.$$hashKey;
      }
    }

    function baseExtend(dst, objs, deep) {
      var h = dst.$$hashKey;

      for (var i = 0, ii = objs.length; i < ii; ++i) {
        var obj = objs[i];
        if (!angular.isObject(obj) && !angular.isFunction(obj)) continue;
        var keys = Object.keys(obj);
        for (var j = 0, jj = keys.length; j < jj; j++) {
          var key = keys[j];
          var src = obj[key];

          if (deep && angular.isObject(src)) {
            if (angular.isDate(src)) {
              dst[key] = new Date(src.valueOf());
            } else {
              if (!angular.isObject(dst[key])) dst[key] = angular.isArray(src) ? [] : {};
              baseExtend(dst[key], [src], true);
            }
          } else {
            dst[key] = src;
          }
        }
      }

      setHashKey(dst, h);
      return dst;
    }

    return function merge(dst) {
      return baseExtend(dst, [].slice.call(arguments, 1), true);
    }
  })();
}

是处理多个对象合并(两个以上对象)的解决方案:

这是一个基于 angular.extend 函数的 extendDeep 函数。如果您将其添加到 $scope 中,您就可以调用

$scope.meta = $scope.extendDeep(ajaxResponse1.myMeta, ajaxResponse2.defaultMeta);

并得到您正在寻找的答案。

$scope.extendDeep = function extendDeep(dst) {
  angular.forEach(arguments, function(obj) {
    if (obj !== dst) {
      angular.forEach(obj, function(value, key) {
        if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
          extendDeep(dst[key], value);
        } else {
          dst[key] = value;
        }     
      });   
    }
  });
  return dst;
};
PS:此函数具有将值从后面的参数复制到前面的参数的副作用。
2021-05-10 03:16:07

如果您使用 < 1.4

您可以使用lodash内置的_.merge()与 angular > 1.4 的版本做同样的事情

让我免于编写新函数,因为lodash它已经很受有角的人的欢迎