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

赞 (0)

相关推荐

  • 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中合并数组的N种方法

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

  • JavaScript数组合并的多种方法

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

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

    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数组合并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

  • 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" ]; 很显然最简单的结

  • 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]

  • 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

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

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

随机推荐