关于数组合并的一些方法

1.concat方法
var arr1 = [1,2,3,4],arr2 = [5,6,7,8];
    arr1=arr1.concat(arr2);
console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Concat 会生成一个全新的数组,表示两个数组的组合,并让原数组不变。但是如果数组过长就很占内存。

2.for 循环的方式
var arr1=[1,2,3,4],arr2=[5,6,7,8]; 
for(var i=0,len=arr2.length;i<len;i++){ 
    arr1.push(arr2[i]) 
} 
console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8]

如果是事先知道每个数组的长度的情况下 我们可以选择遍历数组元素比较短的那个,性能会得到优化,但是不知道长度的话就会很心累了-.-

3.reduce方法
var arr1=[1,2,3,4],arr2=[5,6,7,8];
arr1 = arr2.reduce( function(coll,item){
        coll.push( item );
        return coll;
        }, arr1 );
console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8]

有没有感觉逼格高了一点,使用ES6的箭头函数还能减少代码量,但是仍然需要一个方法,每个元素都要调用一次。

4.push.apply
var arr1 = [1,2,3,4],arr2 = [5,6,7,8];
    arr1.push.apply(arr1,arr2);
console.log(arr1);//[1,2,3,4,5,6,7,8]

代码少,逼格高,不会产生新数组,理解也容易,原理就是调用arr1.push 这个函数的实例的apply 方法,同时把arr2 当做参数传入,不过这个方法对数组的长度有限制,网上说法是不同的浏览器有不同的限制,一般不超过10万。

推荐使用最后一种方法,不过也不是绝对的,大家觉得那种方式用着舒服就用哪种。

在 JavaScript 中,合并数组方法有多种,具体选择取决于使用场景和需求,例如是否需要修改原始数组或是否需要处理嵌套数组等。以下是几种常用的方法: ### 使用 `concat()` 方法 `concat()` 方法用于合并两个或多个数组返回一个新数组,不会修改原始数组。这是最简单和最常用的方法之一。 ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const mergedArray = array1.concat(array2); console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法适合不需要修改原始数组的情况[^3]。 ### 使用展开运算符(Spread Operator) 展开运算符是 ES6 引入的特性,可以更简洁地合并数组。与 `concat()` 类似,它也不会修改原始数组。 ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const mergedArray = [...array1, ...array2]; console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法语法简洁,适合需要快速合并数组的场景[^4]。 ### 使用 `push()` 方法 如果需要直接修改原始数组合并数组,可以使用 `push()` 方法。此方法会将一个或多个元素添加到数组的末尾,修改原始数组。 ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; array1.push(...array2); console.log(array1); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法适合需要直接修改原始数组的情况[^4]。 ### 使用 `flat()` 方法结合 `concat()` 如果数组中包含嵌套数组,可以使用 `flat()` 方法将其展开,然后再使用 `concat()` 合并。 ```javascript const array1 = [1, 2, [3, 4]]; const array2 = [5, 6]; const mergedArray = array1.flat().concat(array2); console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法适合处理包含嵌套数组的情况[^1]。 ### 使用 `reduce()` 方法 `reduce()` 提供了更灵活的合并数组的方式,尤其适合需要对数组元素进行复杂处理的场景。 ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const mergedArray = [array1, array2].reduce((acc, val) => acc.concat(val), []); console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法适合需要动态合并多个数组的情况。 ### 使用 `Set` 去重合并数组 如果需要合并数组去重,可以使用 `Set` 数据结构来实现。 ```javascript let arr1 = [3, 5, 2, 3, 6]; let arr2 = [5, 2, 4, 6, 8, 7, 9, 2]; let arr = arr1.concat(arr2); let arrNew = Array.from(new Set(arr)); console.log(arrNew); // 输出: [3, 5, 2, 6, 4, 8, 7, 9] ``` 此方法适合需要合并数组去重的情况[^2]。 ### 使用 `Array.from()` 方法 `Array.from()` 可以用于将类数组对象或可迭代对象转换为数组,也可以结合其他方法使用。 ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const mergedArray = Array.from(new Set([...array1, ...array2])); console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法适合需要更灵活处理数组的场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值