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

目录
  • 1.ES6 解构
  • 2.遍历添加
  • 3.concat
  • 4.join & split
  • 5.解构添加
  • 6.splice解构
  • 7.apply
  • 8.call
  • 补充:两个数组的交叉合并
  • 总结

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

时间: 2022-11-10

JavaScript及jquey实现多个数组的合并操作

1.原生的JavaScript实现 var array1 = ["a", "b"]; var array2 = ["c", "d"]; 我要合并后变成下面这样: <span class="keyword" style="font-weight:bold">var</span> <span class="keyword" style=&qu

JavaScript中合并数组的N种方法

这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: 复制代码 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ]; 很显然最简单的结

javascript合并两个数组最简单的实现方法

在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现. var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; // 将arr1和arr2合并成为[1, 2, 3, 4, 5, 6] 这里总结一下在JavaScript中合并两个数组的方法. for循环数组 这个方式是最简单的,也是最容易实现的. var arr3 = []; // 遍历arr1 for (var i = 0; i < arr1.length; i++) { arr3.push(

使用不同的方法结合/合并两个JS数组

这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: 复制代码 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ]; 很显然最简单的结

JavaScript合并两个数组并去除重复项的方法

本文实例讲述了JavaScript合并两个数组并去除重复项的方法.分享给大家供大家参考.具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i for(var j=i+1; j if(a[i] === a[j]) a.splice(j, 1); } } return a; }; //Demo var array1 = ["a","b"]; var ar

JavaScript数组合并的多种方法

这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ]; 很显然最简单的结合结果应该是: [ 1

JS数组合并push与concat区别分析

本文实例讲述了JS数组合并push与concat区别.分享给大家供大家参考,具体如下: 注意 concat 拼写,二者功能很相像,但有两点区别. 先看代码: var arr = []; arr.push(1); arr.push([2, 3]); arr.push(4, 5); arr = arr.concat(6); arr = arr.concat([7, 8]); arr = arr.concat(9, 10); arr.each(function(index, value){ alert

JS合并数组的几种方法及优劣比较

本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: 复制代码 代码如下: var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8]; var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ]; 很明显,数组 q 和 b 简单拼接的结果是

JS合并两个数组的3种方法详解

这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: 1.concat js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果. var c = a.concat(b); //c=[1,2,3,4,5,6]

JS实现的合并多个数组去重算法示例

本文实例讲述了JS实现的合并多个数组去重算法.分享给大家供大家参考,具体如下: var arr1 = ['a','b']; var arr2 = ['a','c','d']; var arr3 = [1,'d',undefined,true,null]; //合并两个数组,去重 var concat_ = function(arr1,arr2){ //不要直接使用var arr = arr1,这样arr只是arr1的一个引用,两者的修改会互相影响 var arr = arr1.concat();

JS实现的JSON数组去重算法示例

本文实例讲述了JS实现的JSON数组去重算法.分享给大家供大家参考,具体如下: 需求描述:去除JSON数组中paymode字段相同的项,并将paymoney累加. paylist:[{paymode:'1',payname:"现金",paymoney:"20"}, {paymode:'2',payname:"支付宝",paymoney:"50"},{paymode:'1',payname:"现金",paym

JS实现的合并两个有序链表算法示例

本文实例讲述了JS实现的合并两个有序链表算法.分享给大家供大家参考,具体如下: 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1->2->3->4->4 可以直接运行的方案: <script> function Node(element) { this.element = element;//当前节点的元素 this.next = n

JS基于开关思想实现的数组去重功能【案例】

本文实例讲述了JS基于开关思想实现的数组去重功能.分享给大家供大家参考,具体如下: 场景: 比如给你一个数组var Arr = [ 25, 70, 60, 70, 65, 65, 80 ],最终要得到去重后的新数组[25,70,60,65,80]. 思路: 1.先定义个空的新数组newArr; 2.遍历旧数组Arr 中所有元素; 3.定义一个isZai变量表示开关,默认为false状态; 4.遍历新数组所有元素与旧数组元素比较(Arr[ i ] == newArr[ j ]); 5.如果该元素存

JavaScript数组去重算法实例小结

本文实例总结了JavaScript数组去重算法.分享给大家供大家参考,具体如下: 测试用例: arr = ["1",3,"1",1,4,5,1,"2",5,1,{"name":"li","age":20},2,4,3,{"name":"li","age":20},""]; 方法一:借助于临时数组与indexO

JS实现的Object数组去重功能示例【数组成员为Object对象】

本文实例讲述了JS实现的Object数组去重功能.分享给大家供大家参考,具体如下: 目标:实现成员为 Object 的数组的去重. 注意,这里的数组成员为 Object,而不是数值或者字符串. 调用方法: arr = distinct_arr_element(arr); 函数: /* * 在数组中去除重复项() */ var distinct_arr_element = function( arr ){ if( !arr ) return null ; var resultArr = []; $

JS实现常见的查找、排序、去重算法示例

本文实例讲述了JS实现常见的查找.排序.去重算法.分享给大家供大家参考,具体如下: 今天总结了下排序简单的算法 [自定义排序] 先寻找一个最小的数,然后依次那这个数和数组中其他数字比较,如果发现比这个数字小的数就把这两个数调换位置,然后再继续寻找下一个最小的数字进行下一轮比较 var arr = [31, 6, 19, 8, 2, 3]; function findMin(start, arr) { var iMin = arr[start]; var iMinIndex = start; fo

PHP实现二维数组去重功能示例

本文实例讲述了PHP实现二维数组去重功能.分享给大家供大家参考,具体如下: php中二维数组去重操作.例如从数据库中查询出的记录,根据某个键做去重操操作 代码如下: /** * 删除二维数组中相同项的数据,(一般用于数据库查询结果中相同记录的去重操作) * * @param array $_2d_array 二维数组,类似: * $tmpArr = array( * array('id' => 1, 'value' => '15046f5de5bb708e'), * array('id' =&

PHP实现一维数组与二维数组去重功能示例

本文实例讲述了PHP实现一维数组与二维数组去重功能.分享给大家供大家参考,具体如下: 数组中重复项的去除 一维数组的重复项: 使用array_unique函数即可,使用实例如下: <?php $aa=array("1","2","3","3","2","watermalon"); $bb=array_unique($aa); print_r($bb); ?> 结果如下: Ar

PHP实现的多维数组去重操作示例

本文实例讲述了PHP实现的多维数组去重操作.分享给大家供大家参考,具体如下: 最近用到了一个获取历史会议列表的问题,需要去这个多维数组去重后返回返回给客户端,这里使用了几个php的组装函数,分享下,示例代码如下: <?php $str = '{ "status": 0, "result": [ { "hostName": "杨新", "pcode2": "41675441", &q