js数组合并和对象合并方法小结

1.数组的合并

1.1concat()

var arr1 =[1,2,3],arr2=[4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr3);//[1,2,3,4,5,6]
console.log(arr1);//[1,2,3]  concat不改变原数组

1.2循环遍历

var a = [1,2,3],b=[4,5,6];
for(var i=0;i<b.length;i++){
    a.push(b[i])
}
console.log(a);//[1,2,3,4,5,6]

1.3 apply()  合并数组arr1和arr2,使用Array.prototype.push.apply(arr1,arr2)or arr1.push.apply(arr1,arr2);

var arr1=['a','b','c'],arr2=['d','e','f'];
Array.prototype.push.apply(arr1,arr2);
or arr1.push.apply(arr1,arr2)
console.log(arr1)//['a','b','c','d','e','f']

2.对象合并

2.1JQuery的extend()方法

**方法定义**:jQuery.extend([deep], target, object1, [objectN])

        > 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

   > 如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象(递归合并)。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

var o1={'a':1};var o2={'b':2,'c':3};
var o3 = $.extend(o1,o2);
console.log(o3);//{'a':1,'b':2,'c':3}
console.log(o1);//{'a':1,'b':2,'c':3}//o1,o2被修改
var o4 = $.extend({},o1,o2)
console.log(o4);//{'a':1,'b':2,'c':3}
console.log(o1);//{'a':1}//不会改变o1,o2

2.2Object.assign()方法

方法介绍:可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

Object.assign(target,...sources)

2.2.1复制一个对象

var obj={a:1,b:2};
var copyObj = Object.assign({},obj);
console.log(copyObj);//{a:1,b:2}

2.2.2合并多个对象

var o1 ={a:1};
var o2={b:2};
var o3={c:3};
var obj = Object.assign(o1,o2,o3);
console.log(obj)//{a:1,b:2,c:3}
console.log(o1)//{a:1,b:2,c:3},目标对象自身也会改变

2.3遍历赋值法

代码逻辑:1.循环对象n中的每一个对应属性

                2.确认对象n中存在该属性

               3.确认对象o中不存在该属性

var extend=function(o,p){
     for(var p in n){
        if(n.hasOwnProperty(p) &&(!o.hasOwnProperty(p)))
            o[p]=n[p];
      }
};

例子:

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
    if(obj2.hasOwnProperty(key)===true){//hasOwnProperty用来判断自有属性,使用for in 循环遍历对象属性时,原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
        obj1[key]=obj2[key];
    }
}
console.log(obj1);//{'a':1,'b':2,'c':3}

2.4对象的深拷贝和浅拷贝

2.4.1浅拷贝

var o1={'a':1};
var o2={'b':{'b1':11,'b2':111}};

$.extend(o1, o2);   //o1拷贝了o2的属性

console.log(o1)  // {'a':1,'b'{'b1':11,'b2':111}}
console.log(o1.b.b1)  // 11

o2.b.b1=999;   //o2重新赋值
console.log(o1.b.b1)  // 999  o1.b仅拷贝了对象的指引,所以受原o2的影响

2.4.2深拷贝

var o1={'a':1};
var o2={'b':{'b1':11,'b2':111}};

$.extend(true,o1, o2);   //true 表示深复制

console.log(o1)  // {'a':1,'b'{'b1':11,'b2':111}}
console.log(o1.b.b1)  // 11

o2.b.b1=999;   //o2重新赋值
console.log(o1.b.b1)  //11  o1拷贝了o2的所有属性以及值,并不受o2的影响




  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用JavaScript的reduce()和concat()方法合并多层对象数组。以下是一个示例代码,它将合并具有相同ID属性的对象,并将它们的数量相加: ```javascript const arr1 = [{id: 1, name: 'A', count: 2}, {id: 2, name: 'B', count: 3}]; const arr2 = [{id: 1, name: 'A', count: 4}, {id: 3, name: 'C', count: 1}]; const mergedArr = [...arr1, ...arr2].reduce((acc, curr) => { const index = acc.findIndex(item => item.id === curr.id); if (index === -1) { return [...acc, curr]; } else { acc[index].count += curr.count; return acc; } }, []); console.log(mergedArr); // Output: [{id: 1, name: 'A', count: 6}, {id: 2, name: 'B', count: 3}, {id: 3, name: 'C', count: 1}] ``` 如果要合并多层对象数组,可以使用递归来处理每个子数组。以下是一个示例代码: ```javascript const arr1 = [{id: 1, children: [{id: 2, name: 'A', count: 2}]}, {id: 3, name: 'B', count: 3}]; const arr2 = [{id: 1, children: [{id: 2, name: 'A', count: 4}]}, {id: 4, name: 'C', count: 1}]; function mergeArrays(arr1, arr2) { const mergedArr = [...arr1, ...arr2].reduce((acc, curr) => { const index = acc.findIndex(item => item.id === curr.id); if (index === -1) { return [...acc, curr]; } else if (curr.children) { acc[index].children = mergeArrays(acc[index].children, curr.children); return acc; } else { acc[index].count += curr.count; return acc; } }, []); return mergedArr; } const result = mergeArrays(arr1, arr2); console.log(result); // Output: [{id: 1, children: [{id: 2, name: 'A', count: 6}]}, {id: 3, name: 'B', count: 3}, {id: 4, name: 'C', count: 1}] ``` 这个示例代码中,mergeArrays()函数使用递归来处理每个子数组,直到没有子数组为止。在每个子数组中,它再次使用reduce()方法合并具有相同ID属性的对象。如果当前对象具有子数组,则递归处理该子数组。否则,它将增加当前对象的数量。最终,该函数将返回合并后的数组

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值