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 结果：

区别：

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

总结：

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

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

您可能感兴趣的文章:

JavaScript中.min.js和.js文件的区别讲解
今天小编就为大家分享一篇关于JavaScript中.min.js和.js文件的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
JavaScript对象创建模式实例汇总
这篇文章主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
2016-10-10
JS中confirm,alert,prompt函数区别分析
JS中confirm,alert,prompt函数使用区别有哪些呢？
2011-01-01
js的写法基础分析
js的写法基础分析，学习js的朋友可以参考下。
2011-01-01
Three.js利用性能插件stats实现性能监听的方法
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。
2017-09-09
纯JavaScript实现实时反馈系统时间
这篇文章主要介绍了纯JavaScript实现实时反馈系统时间的相关资料,需要的朋友可以参考下
2017-10-10
Bootstrap Table服务器分页与在线编辑应用总结
这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
uniapp小程序实现瀑布流布局的思路与代码
这篇文章主要给大家介绍了关于uniapp小程序实现瀑布流布局的思路与代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
JS生态系统加速桶装文件使用探索
这篇文章主要为大家介绍了JS 生态系统加速桶装文件使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
JavaScript实现彩虹文字效果的方法
这篇文章主要介绍了JavaScript实现彩虹文字效果的方法,涉及javascript操作文字样式的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04