객체를 Angular와 심층 병합JS

객체를 Angular와 심층 병합JS

일반적으로 사용하는 개체는 얕은 복사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"
  }
}

• 제가 모르는 딥 머지 기능이 이미 있나요?

• 그렇지 않은 경우 n레벨 깊이에 대해 javascript를 재귀적으로 실행할 수 있는 네이티브 방법이 있습니까?

각도 1.4 이후

사용방법:

와는 달리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;
}

여기 작동 중인 바이올린이 있습니다.

(주의: 어레이는 여기서 취급하지 않습니다.)

Angularjs의 새로운 버전에서는 딥 복사를 실행하는 머지 기능이 추가되었습니다.

이전 버전에서는 새로운 버전의 Angularjs에서 Marge 함수 코드를 복사하여 커스텀 함수를 만들었습니다.아래는 같은 코드입니다.

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가 이전 버전에서 작동하지 않는지 궁금해 하는 사람들에게 도움이 되기를 바랍니다.

angular.polyfill(각 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);
    }
  })();
}

다음은 여러 개체를 병합하는 솔루션을 보여 줍니다(3개 이상의 개체).

다음은 각도에 기반한 extendDeep 함수입니다.기능을 확장합니다.이것을 $스코프에 추가하면, 전화할 수 있습니다.

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

1.4 미만 사용 시

사용할 수 있습니다.lodash는 _.delect()에 포함되어 있으며, 이는 angular > 1.4 의 버전과 같은 동작을 합니다.

이후 새로운 기능을 쓸 필요가 없어졌습니다.lodash이미 각진 사람들 사이에서 꽤 인기가 있다.

언급URL : https://stackoverflow.com/questions/17242927/deep-merge-objects-with-angularjs