JavaScript数组合并的8种常见方法小结

 更新时间:2022年11月12日 11:37:56   作者:tengxi_5290  
项目过程中经常会遇到 JS 数组合并的情况,时常为这个纠结,这里整理一下,下面这篇文章主要给大家介绍了关于JavaScript数组合并的8种常见方法,需要的朋友可以参考下

1.ES6 解构

[...arr, ...array]

不改原数组值,生成新的数组。  

2.遍历添加

array.forEach(item => {
    arr.push(item)
})

遍历方法:forEach、map、filter、every、for、for in、for of等。

添加方法:push(后追加)、unshift(前追加)等。

arr值改变成追加后的样子,array值不改变

3.concat

arr.concat(array)

不改原数组值,生成新的数组。 

4.join & split 

(arr.join(',') + ',' + array.join(',')).split(',')

原数组值不改变。 

默认会把数组中的数字类型转成字符串类型。

数组的项是引用类型时会自动生成'[object Object]',造成数据丢失或错误。

5.解构添加

arr.push(...array)
arr.unshift(...array)

arr变成合并后的样子,array值不变。 

6.splice解构

arr.splice(arr.length, '', ...array)

原数组值不变,返回空数组。 

7.apply

arr.push.apply(arr, array)
arr.unshift.apply(arr, array)

原数组值不改变,返回拼接后数组的长度。 

8.call

arr.push.call(arr, ...array)
arr.unshift.call(arr, ...array)

原数组值不改变,返回拼接后数组的长度。 

补充:两个数组的交叉合并

var ary=["A","B","C","D"];
var ary2=[1,2,3,4,5,6,];
function aryJoinAry(ary,ary2) {
    var itemAry=[];
    var minLength;
    //先拿到两个数组中长度较短的那个数组的长度
    if(ary.length>ary2.length){
        minLength=ary2.length;
    }
    else{
        minLength=ary.length;
    }
    //将两个数组中较长的数组记录下来
    var longAry=arguments[0].length>arguments[1].length?arguments[0]:arguments[1];
    //循环范围为较短的那个数组的长度
    for (var i = 0; i < minLength; i++) {
        //将数组放入临时数组中
        itemAry.push(ary[i]);
        itemAry.push(ary2[i])
    }
    //itemAry和多余的新数组拼接起来并返回。
    return itemAry.concat(longAry.slice(minLength));
}
console.log(aryJoinAry(ary, ary2));// ["A", 1, "B", 2, "C", 3, "D", 4, 5, 6]

总结

到此这篇关于JavaScript数组合并的8种常见方法小结的文章就介绍到这了,更多相关JS数组合并方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript面向对象程序设计高级特性经典教程(值得收藏)

    javascript面向对象程序设计高级特性经典教程(值得收藏)

    这篇文章主要介绍了javascript面向对象程序设计高级特性,结合实例形式详细讲述了javascript对象的创建,访问,删除,对象类型,扩展等,需要的朋友可以参考下
    2016-05-05
  • js中substring和substr的详细介绍与用法

    js中substring和substr的详细介绍与用法

    这篇文章介绍了js中substring和substr的用法,有需要的朋友可以参考一下
    2013-08-08
  • js原生之焦点图转换加定时器实例

    js原生之焦点图转换加定时器实例

    本文主要分享了在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval())的实例代码。需要的朋友可以参考借鉴
    2016-12-12
  • js获取 gif 的帧数的代码实例

    js获取 gif 的帧数的代码实例

    这篇文章主要介绍了js获取 gif 的帧数的代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • try finally 妙用,防止内存泄漏

    try finally 妙用,防止内存泄漏

    预防内存泄漏
    2008-03-03
  • 浅谈JavaScript原型链

    浅谈JavaScript原型链

    这篇文章主要为大家详细介绍了JavaScript原型链,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2023-04-04
  • js中Object.defineProperty()方法的不详解

    js中Object.defineProperty()方法的不详解

    这篇文章主要介绍了js中Object.defineProperty()方法的不详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js获取地址栏参数的两种方法

    js获取地址栏参数的两种方法

    这篇文章主要为大家详细介绍了js获取地址栏参数的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 小程序实现分页查询列表的模板

    小程序实现分页查询列表的模板

    这篇文章主要为大家详细介绍了小程序实现分页查询列表的模板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • js 程序执行与顺序实现详解

    js 程序执行与顺序实现详解

    JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行,浏览器对于不同的方式有不同的解析顺序,详细介绍如下,感兴趣的朋友可以参考下哈
    2013-05-05

最新评论