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

 更新时间:2021年07月28日 11:05:32   作者:wandejun1012  
这篇文章主要介绍了JS数组合并push与concat区别,结合实例形式分析了JavaScript中针对数组合并操作使用push与concat的区别,需要的朋友可以参考下

本文实例讲述了JS数组合并push与concat区别。分享给大家供大家参考,具体如下:

共同点

两个方法都可以在一个数组内增添新的元素,参数都是无限的参数列表,使用方法如下

var testPushArr=[];
testPushArr.push(item1,item2,item3...);
var testConcatArr=[];
var concatArr = testConcatArr.concat(item1,item2,item3...);

push和concat的元素都既可以是普通元素(任意类型),也可以数组元素

区别

push()

push的item会添加到末尾,并且都是以整体的形式添加到数组末尾,数组元素会直接以数组整体的形式存在
push方法会直接修改原数组,返回值为加入元素后的新数组长度

示例代码

var testPushArr=[1,2];
testPushArr.push(3,[4,5]);
console.log(testPushArr);//1,2,3,[4,5]

concat()

concat的元素会被打碎,非数组元素无法打碎,以整体形式加入,数组元素会被打碎,以单个元素的形式加入
concat方法不会修改原数组,而是连接之后返回一个新的数组,通常用arr = arr.concat(...)的形式来接收返回值,否则看不到修改效果

示例代码

ar testConcatArr=[1,2];
var concatArr = testConcatArr.concat(3,[4,5]);
console.log(concatArr );//1,2,3,4,5

下面是补充

注意 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(value);
});

alert 结果:

1
2,3
4
5
6
7
8
9
10

区别:

push 遇到数组参数时,把整个数组参数作为一个元素;而 concat 则是拆开数组参数,一个元素一个元素地加进去。
push 直接改变当前数组;concat 不改变当前数组。

总结:

如果想数组追加用concat,但是和java的replace一样,用完记得arr1=arr1.concat(arr2)

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JS面向对象编程浅析

    JS面向对象编程浅析

    下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程。
    2011-08-08
  • javascript实现移动端触屏拖拽功能

    javascript实现移动端触屏拖拽功能

    这篇文章主要为大家详细介绍了javascript实现移动端触屏拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • js实现简单选项卡功能

    js实现简单选项卡功能

    这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JavaScript实现飞机大战游戏

    JavaScript实现飞机大战游戏

    这篇文章主要为大家详细介绍了JavaScript实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 使用JavaScript遍历输出页面中的所有元素的方法详解

    使用JavaScript遍历输出页面中的所有元素的方法详解

    在前端开发中,遍历页面中的所有元素是一个常见需求,无论是调试、页面分析,还是获取元素信息,都会用到遍历 DOM 树的操作,本文将介绍如何通过 JavaScript 编写一个方法,遍历并输出页面中的所有元素,需要的朋友可以参考下
    2024-12-12
  • 小程序scroll-view安卓机隐藏横向滚动条的实现详解

    小程序scroll-view安卓机隐藏横向滚动条的实现详解

    这篇文章主要介绍了小程序scroll-view安卓机隐藏横向滚动条的实现详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • javascript跨浏览器的属性判断方法

    javascript跨浏览器的属性判断方法

    这篇文章主要介绍了javascript跨浏览器的属性判断的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript实现数字数组正序排列的方法

    JavaScript实现数字数组正序排列的方法

    这篇文章主要介绍了JavaScript实现数字数组正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js实现数组转换成json

    js实现数组转换成json

    本文给大家分享的是使用javascript实现的数组转换json的代码,非常简单实用,相当于JSON.stringify(array);,有需要的小伙伴可以参考下。
    2015-06-06
  • 使用原生js写ajax实例(推荐)

    使用原生js写ajax实例(推荐)

    下面小编就为大家带来一篇使用原生js写ajax实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论