使用 AngularJS 深度合并对象 [英] deep merge objects with AngularJS

问题描述

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

Normally to shallow copy objects I would use angular.extend()

这是一个例子:

var object1 = {
  "key": "abc123def456",
  "message": {
    "subject": "Has a Question",
    "from": "[e-mail]",
    "to": "[e-mail]"
   }
};

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

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

会给我们:

{
 "key": "00700916391",
 "message": {
   "subject": "Has a Question",
   "from": "[e-mail]",
   "to": "[e-mail]"
  }
}

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

But what if I wanted to merge objects so that parent keys are not over written by child objects:

var object1 = {
  "key": "abc123def456",
  "message": {
    "subject": "Has a Question",
    "from": "[e-mail]",
    "to": "[e-mail]"
   }
};

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": "[e-mail]",
   "to": "[e-mail]",
   "something": "something new"
  }
}

• 是否有一个 Angular 函数已经进行了我不知道的深度合并?

  • Is there an Angular function that already does a deep merge that I am not aware of?

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

    If not is there a native way to do this in javascript recursively for n levels deep?

    推荐答案

    Angular 1.4 或更高版本

    使用angular.merge:

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

    Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.

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

    <小时>

    旧版本的 Angular:

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

    There is no reason a simple recursive algorithm shouldn't work :)

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

    Assuming they're both the result of JSON.stringify or similar:

    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;
    }
    

    这是一个有用的小提琴

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

    Here is a working fiddle

    (Note, arrays are not handled here)

    这篇关于使用 AngularJS 深度合并对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！