JS数组合并的7种常见方法

这篇具有很好参考价值的文章主要介绍了JS数组合并的7种常见方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

项目过程中,经常会遇到 JS 数组合并的情况,时常为这个纠结。这里整理一下

1、ES6解构

[…arr, …arr2] 会生成新的数组

let arr = [1, 2]
let arr2 = [3, 4]

arr = [...arr, ...arr2]

console.log(arr)
// [1, 2, 3, 4]

2、concat

arr.concat(arr2) 会生成新的数组

let arr = [1, 2]
let arr2 = [3, 4]

arr = arr.concat(arr2)

console.log(arr)
// [1, 2, 3, 4]

3、push

push 结合 …[] 来实现。

会变更原数组

let arr = [1, 2]
let arr2 = [3, 4]

arr.push(...arr2)

console.log(arr)
// [1, 2, 3, 4]

4、arr.push.apply(arr, arr2)

第一种 for 循环就是使用的 push 来实现的。

因为 push 是可以接收多个参数的,所以我们可以使用 apply 来实现。

会变更原数组。

let arr = [1, 2]
let arr2 = [3, 4]

arr.push.apply(arr, arr2)

console.log(arr)
// [1, 2, 3, 4]

5、遍历添加

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

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

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

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

6、join & split

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

原数组值不改变。

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

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

7、call

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

原数组值不改变,返回拼接后数组的长度。文章来源地址https://www.toymoban.com/news/detail-775513.html

到了这里,关于JS数组合并的7种常见方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 常见JavaScript加密算法、JS加密算法

         SHA-256是一种密码散列函数,可以将任意长度的消息压缩成256位的摘要值。以下是使用JavaScript实现SHA-256加密算法的代码示例: 使用方法:      Base64编码是一种将二进制数据转换为ASCII字符的编码方式,常用于在网络上传输数据。以下是使用JavaScript实现Base64编码算法

    2024年02月08日
    浏览(47)
  • 【javascript】js获取数组中数值最大的数

    一、借助apply()的参数,获得最大值 由于max()里面参数不能为数组,所以借助apply(funtion,args)方法调用Math.max(),function为要调用的方法,args是数组对象,当function为null时,默认为上文,即相当于apply(Math.max,arr) 二、借助call()的参数,获得最大值 call()与apply()类似,区别是传入参数

    2024年02月11日
    浏览(33)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(42)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(43)
  • 【JavaScript】JS能力测试题:数组扁平化 | 判断质数 | 获取字符串的长度

    💎个人主页: 阿选不出来 💎个人简介: 大三学生,热爱Web前端,随机掉落学习碎片 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💎祝愿今天的你比昨天更加博识了! 题目描述 请补全JavaScript代码,要求将数组参数中的多维数组扩展为一维数组并返回该数组。 注意: 数组参数中仅

    2024年02月07日
    浏览(40)
  • js/javascript获取时间戳的5种方法

    以下便是干货 1.获取时间戳精确到秒,13位 2.获取时间戳精确到毫秒,13位 3.获取时间戳精确到毫秒,13位 4.获取时间戳精确到毫秒,13位 5.获取时间戳精确到毫秒,13位 其它 在开发的中需要精确到秒的时候,推荐使用 第1种方法,也需要除以1000才行,如果是需要时间戳毫秒的推荐 +new D

    2024年02月11日
    浏览(33)
  • 【js】JavaScript清除所有(多个)定时器的方法:

    一、停止单个定时器 二、暂停与恢复定时器 三、使用Promise来管理定时器 四、使用ES6特性管理定时器 五、案例(定时获取页面列表数据) 定时器会生成多个,即有多个定时器id,需要清除不需要的的定时器 菜单没有选中当前页面,定时器也不需要

    2024年02月03日
    浏览(47)
  • 【技巧】ScriptEngine--Java动态执行JS Javascript脚本(可调用java的方法)

    开发手册 Java Platform, Standard Edition Nashorn User\\\'s Guide, Release 14 用户手册 Nashorn User\\\'s Guide (oracle.com) https://docs.oracle.com/en/java/javase/14/nashorn/ 甚至可以让前端来写后端业务代码 可以通过js调用java的方法, 通过传参的方式将java对象传给js 可以单独写个JsUtil 让js来调用 里边写常用的方法

    2024年02月01日
    浏览(37)
  • javascript打飞机程序8x8x飞机大战js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    讲解了JavaScript编程语言制作游戏界面,添加游戏控制、制作元素动画、制作多元素场景,添加碰撞功能、制作精灵动画等功能 源码如下: html:

    2024年02月16日
    浏览(50)
  • JS中字符串切割为数组/数组拼接为字符串

    (1)语法格式: 其中所选分隔符使用双引号(“”)或者单引号(‘’)括起来; 所生成的数组会存放于前面定义的数组变量中。 (2)样例: JS代码: 运行结果: (3)其他用法: ①当所选分隔符为空时,返回的数组即将每个字符分割出来: JS代码: 运行结果: ②分隔

    2024年02月12日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包