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

作者:tengxi_5290 时间:2024-04-16 09:32:55 

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]

来源:https://blog.csdn.net/tengxi_5290/article/details/124825523

标签:js,数组,合并
0
投稿

猜你喜欢

  • python3爬虫GIL修改多线程实例讲解

    2023-06-09 22:33:58
  • python 使用xlsxwriter循环向excel中插入数据和图片的操作

    2023-01-30 15:08:47
  • NumPy 如何生成多维数组的方法

    2022-06-26 20:40:51
  • GoLang unsafe包详细讲解

    2024-02-02 05:09:46
  • python中mediapipe库踩过的坑实战记录

    2021-03-07 13:32:47
  • django 实现电子支付功能的示例代码

    2022-01-31 01:30:34
  • Python中三种条件语句示例介绍

    2022-09-17 17:28:30
  • Python字符串拼接的4种方法实例

    2023-01-30 18:57:15
  • 浅谈Python peewee 使用经验

    2023-09-14 14:20:55
  • python等待10秒执行下一命令的方法

    2022-02-25 00:40:03
  • Python基础学习之反射机制详解

    2023-02-15 11:02:01
  • python实现人脸签到系统

    2023-12-21 06:35:05
  • W3C 接连推出 7 个 HTML 草案

    2010-03-10 10:37:00
  • Python 通过pip安装Django详细介绍

    2022-09-01 20:25:55
  • python中urlparse模块介绍与使用示例

    2021-08-08 10:13:18
  • python实现按任意键继续执行程序

    2021-02-12 12:47:10
  • Python生产者与消费者模型中的优势介绍

    2023-06-18 01:21:17
  • 10个有用的Python字符串函数小结

    2023-08-13 11:26:28
  • Python开发的HTTP库requests详解

    2021-09-06 19:08:09
  • C#操作数据库总结(vs2005+sql2005)

    2024-01-20 22:20:29
  • asp之家 网络编程 m.aspxhome.com