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数组合并方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js数组相减简单示例【删除a数组所有与b数组相同元素】

    js数组相减简单示例【删除a数组所有与b数组相同元素】

    这篇文章主要介绍了js数组相减,结合简单示例形式分析了JavaScript删除a数组所有与b数组相同元素相关个遍历、判断、删除等相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • JavaScript插件Tab选项卡效果

    JavaScript插件Tab选项卡效果

    这篇文章主要为大家详细介绍了JavaScript插件Tab选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 微信小程序实现车牌键盘

    微信小程序实现车牌键盘

    这篇文章主要为大家详细介绍了微信小程序实现车牌键盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript等号运算符使用详解

    javascript等号运算符使用详解

    在JavaScript中,等号由双等号(==)表示,当且仅当两个运算数相等时,它返回true。今天我们就来详细探讨下等号运算符的问题,并附上等号运算符和全等号运算符的区别分析。
    2015-04-04
  • JavaScript数组push方法使用注意事项

    JavaScript数组push方法使用注意事项

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。这篇文章主要介绍了JavaScript数组push方法使用注意,需要的朋友可以参考下
    2017-10-10
  • 前端大文件分片下载具体实现方法(看这一篇就够了)

    前端大文件分片下载具体实现方法(看这一篇就够了)

    本文介绍了在浏览器中下载大文件的技术方案,包括分片下载、断点续传、进度条显示、取消及暂停下载和文件合并等功能,分片下载可以降低网络传输中断的风险,并减少内存占用,需要的朋友可以参考下
    2024-10-10
  • 浅谈JavaScript的全局变量与局部变量

    浅谈JavaScript的全局变量与局部变量

    下面小编就为大家带来一篇浅谈JavaScript的全局变量与局部变量。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript 冒泡排序 正序和倒序实现代码

    javascript 冒泡排序 正序和倒序实现代码

    javascript 冒泡排序 正序和倒序实现代码,需要的朋友可以参考下。
    2010-12-12
  • 纯JS实现五子棋游戏

    纯JS实现五子棋游戏

    这篇文章主要为大家详细介绍了纯JS实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 基于JS实现文字转语音即文本朗读

    基于JS实现文字转语音即文本朗读

    这篇文章主要为大家详细介绍了JavaScript如何利用SpeechSynthesis实现文字转语音即文本朗读的功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10

最新评论