用AngularJS深度合并对象
deep merge objects with AngularJS
对于浅拷贝对象,我会使用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级深度?
角1.4或更高版本
使用angular.merge
:
与
extend()
不同,merge()
递归地下降到源对象的对象属性,执行深度复制。
angular.merge(object1, object2); // merge object 2 into object 1
旧版本的Angular:
没有理由一个简单的递归算法不能工作:)
假设它们都是JSON的结果。字符串化或类似:
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中,他们添加了merge函数来执行深度拷贝。
对于旧版本,我通过从新版本的Angularjs中复制merge函数的代码来创建我的自定义函数。下面是相同的
的代码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);
}
希望这将帮助那些想知道为什么角。旧版本无法进行合并
合并多边形角<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的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
内置的_.merge(),它的功能与angular> 1.4版本
为我节省了编写新函数的时间,因为lodash
在angular中已经很流行了
相关文章:
- 将两个数组与对象合并
- 如何使用ES6将两个具有函数的对象合并为一个新对象
- 将值和属性从一个对象合并到另一个对象
- 如何将两个json对象合并为一个json
- 将来自多个控制器的 AngularJS 范围对象合并到一个对象中
- 在 node.js 中将 2 个 json 对象合并为一个
- Angular JS将2个对象合并为第三个对象
- JavaScript - 将两个数组对象合并为一个arr对象,然后遍历每个索引/对象
- 将同一数组中的多个对象合并为一个对象
- 如何在 Javascript 中将嵌套对象合并到它们的父对象中
- 将状态与来自循环反应的对象合并
- 将数组合并到对象以及对象合并到数组
- 如何将两个d3对象合并为一个进行批量操作
- 将JSON对象与JSON子对象合并
- 将一个对象合并到另一个对象的最佳方式(无覆盖)
- 使用jQuery扩展方法将函数与对象合并,为什么'只返回s的函数
- 如何将数组与值为数组的对象合并
- 循环遍历数组以查找具有匹配id的所有对象,并将这些对象合并到数组中的一个元素中
- Javascript将对象合并到key ->一组值
- 如何将两个查询对象合并为一个查询对象