快捷導(dǎo)航

JS數(shù)組合并push與concat區(qū)別分析

更新時間：2021年07月28日 11:05:32 作者：wandejun1012

這篇文章主要介紹了JS數(shù)組合并push與concat區(qū)別,結(jié)合實(shí)例形式分析了JavaScript中針對數(shù)組合并操作使用push與concat的區(qū)別,需要的朋友可以參考下

本文實(shí)例講述了JS數(shù)組合并push與concat區(qū)別。分享給大家供大家參考，具體如下：

共同點(diǎn)

兩個方法都可以在一個數(shù)組內(nèi)增添新的元素，參數(shù)都是無限的參數(shù)列表，使用方法如下

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

push和concat的元素都既可以是普通元素(任意類型)，也可以數(shù)組元素

區(qū)別

push()

push的item會添加到末尾，并且都是以整體的形式添加到數(shù)組末尾，數(shù)組元素會直接以數(shù)組整體的形式存在
push方法會直接修改原數(shù)組，返回值為加入元素后的新數(shù)組長度

示例代碼

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

concat()

concat的元素會被打碎，非數(shù)組元素?zé)o法打碎，以整體形式加入，數(shù)組元素會被打碎，以單個元素的形式加入
concat方法不會修改原數(shù)組，而是連接之后返回一個新的數(shù)組，通常用arr = arr.concat(...)的形式來接收返回值，否則看不到修改效果

示例代碼

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

下面是補(bǔ)充

注意 concat 拼寫，二者功能很相像，但有兩點(diǎn)區(qū)別。

先看代碼：

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 結(jié)果：

區(qū)別：

push 遇到數(shù)組參數(shù)時，把整個數(shù)組參數(shù)作為一個元素；而 concat 則是拆開數(shù)組參數(shù)，一個元素一個元素地加進(jìn)去。
push 直接改變當(dāng)前數(shù)組；concat 不改變當(dāng)前數(shù)組。

總結(jié)：

如果想數(shù)組追加用concat,但是和java的replace一樣，用完記得arr1=arr1.concat(arr2)

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

$JS面向?qū)ο缶幊虦\析$
JS面向?qū)ο缶幊虦\析
下面就結(jié)合我自己的體會和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
javascript實(shí)現(xiàn)移動端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
js實(shí)現(xiàn)簡單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡單的選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
使用JavaScript遍歷輸出頁面中的所有元素的方法詳解
在前端開發(fā)中,遍歷頁面中的所有元素是一個常見需求,無論是調(diào)試、頁面分析,還是獲取元素信息,都會用到遍歷 DOM 樹的操作,本文將介紹如何通過 JavaScript 編寫一個方法,遍歷并輸出頁面中的所有元素,需要的朋友可以參考下
2024-12-12
小程序scroll-view安卓機(jī)隱藏橫向滾動條的實(shí)現(xiàn)詳解
這篇文章主要介紹了小程序scroll-view安卓機(jī)隱藏橫向滾動條的實(shí)現(xiàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
javascript跨瀏覽器的屬性判斷方法
這篇文章主要介紹了javascript跨瀏覽器的屬性判斷的方法,需要的朋友可以參考下
2014-03-03
JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下
2015-04-04
js實(shí)現(xiàn)數(shù)組轉(zhuǎn)換成json
本文給大家分享的是使用javascript實(shí)現(xiàn)的數(shù)組轉(zhuǎn)換json的代碼，非常簡單實(shí)用，相當(dāng)于JSON.stringify(array);，有需要的小伙伴可以參考下。
2015-06-06
使用原生js寫ajax實(shí)例(推薦)
下面小編就為大家?guī)硪黄褂迷鷍s寫ajax實(shí)例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05