Js數組的操作push,pop,shift,unshift等方法詳細介紹_javascript技巧

js中針對陣列操作的方法還是比較多的，今天突然想到來總結一下，也算是溫故而知新吧。不過不會針對每個方法進行講解，我只是選擇其中的一些來講。

首先來講一下push和pop方法，這兩個方法只會對數組從尾部進行壓入或彈出，而且是在原數組進行操作，任何的改動都是會影響到操作的數組。 push(args)可以每次壓入多個元素，並傳回更新後的陣列長度。 pop()函數每次只會彈出最後一個結尾的元素，並傳回彈出的元素，如果是對空組數呼叫pop()則傳回undefined。 如果參數是數組則是將整個數組當作一個元素壓入原來的數組當中。並不會產生類似concat合併數組時產生的“拆分現象”，下面看例子

例1:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))–>5(這裡只會將[5,6]當做一個元素來計算,返回更新後的數組長度5)
此時oldArr –>[1,2,3,4,[5,6]]
alert(oldArr.pop())–>[5,6](這裡彈出最後一個元素[5,6],而不是6 )
此時oldArr–>[1,2,3,4]
oldArr.pop()–>4
oldArr.pop()–>3
oldArr.pop()–> 2
oldArr.pop()–>1
oldArr.pop()–>undefined(空數組彈出)
現在講完push和pop再看一下unshift和shift
這兩個方法都是透過對陣列的頭部進行的操作，其他基本跟push和pop類似，但是在IE中unshift方法返回的是undefined

例2:
var oldArr2 =[1,2];
oldArr2.unshift(3)–>undefined
此時oldArr2為–>[3,1,2]
oldArr2.shift()–>3
此時oldArr2為[1,2]
接下來看一下功能強大一點的splice,利用其可以進行數組隨意位置的元素添加，刪除，其操作也是在原有

數組上修改
splice(start,deleteCnt,args) 中的start表示開始操作下標，deleteCnt表示從開始下標開始（包括該元素)要刪除的元素個數，刪除操作返回刪除的元素。 args表示用來替換刪除掉的那些元素（可以有多個參數)，start和deleteCnt必須為數字，如果不是數字嘗試轉換，轉換失敗當做0來處理。 splice必須至少有一個start元素，否則不做任何操作。 deleteCnt不存在表示刪除start及後面的全部元素（IE下，取0不做刪除)。 start可以為負數，表示從陣列右邊結尾開始計算。 deleteCnt如果為負數不做刪除，因為不可能刪除負個元素。
好了解釋就到這邊現在看一下例子，透過例子或許可以更好的理解

例3：
var oldArr3=[1,2];
oldArr3.splice()–>”"(返回空的字串,不做任何操作,操作後oldArr3–>[1,2])
oldArr3.splice(“”)–>[1, 2](“”嘗試轉換為數字失敗返回0,所以刪除1,2,操作後oldArr3–>[],但是IE下有點噁心，不做任何操作)
oldArr3.splice(“1a”)– >同上
odlArr3.splice(0,2)–>[1,2](「從下標0的元素開始，刪除兩個元素1,2因此刪除後oldArr3–>[])
oldArr3 .splice(0,-1)–>”"(從0下標開始刪除-1個元素，故等於沒做任何操作,操作後oldArr3–>[1,2])
oldArr3.splice(1 ,1)–>2(從下標1 開始刪除1個元素，即刪除2，所以刪除後oldArr3–>[1])
oldArr3.splice(1,4)–>2(從下標1開始刪除4個元素，1開始只有1個元素，故刪除2，所以刪除後oldArr3–>[1]）
oldArr3.splice(-1,0,3)–>”"(從下標- 1即2元素開始刪除0個元素，然後加入元素3，所以操作後oldArr3–>[1,3,2])
oldArr3.splice(-1,1,3)–>2(從小標- 1即2元素開始刪除1個元素，然後加入元素3，操作後為oldArr3–>[1,3])
OK接下來開始講concat，這個方法用來連接兩個或多個陣列,該陣列不會改變原來的陣列只會傳回新的一個陣列。 🎜>:
var oldArr4=[1,2];
oldArr4.concat(3,4)–>[1,2,3,4] oldArr4.concat(3,4,[5 ,6])–>[1,2,3,4,5,6](這邊加的是[5,6]中的元素5和元素6） oldArr4.concat(3,[4, [5,6]])–>[1,2,3,4,[5,6]](這邊最裡層的元素[5,6]整個用來添加，而不是拆開)
下面來講數組中的排序方法sort
sort(function)是針對原數組進行的排序，不會產生新的陣列。預設sort()不帶參數時按照陣列中的元素轉換成字串進行比較，比較的時候按照字元在字元編碼中的順序進行排序，每個字元都有一個唯一的編碼與其對應。

且看下面例子
var oldArr5=[3,1,5,7,17​​] 看這個一般觀念上以為對oldArr5排序時oldArr5.sort()會按照數字從小到大排序即回傳[1,3,5,7,17​​]，但看一下結果其實不然回傳的是[1,17,3,5,7] 因為比較的時候都會轉成字串。然後對字串進行一個個的比較如果第一個字元相同則比較第二個，否則直接傳回比較結果，因為”17″
sort(function)方法除了預設的無參外還可以傳入自訂的排序方法，這樣排序的結果完全可以由自己來控制了，想怎麼排就怎麼排，是不是很爽啊，呵呵。 一般自訂的function比較函數，包含兩個參數分別代表用來比較的左元素和右元素。然後透過一定方式回傳一個結果，如果傳回值大於0表示交換左右元素，如果傳回值小於0或等於0則表示不不會交換左右元素。現在來看看範例

例5:
依照數字由大到小排列原有陣列

複製程式碼 程式碼如下:

var oldArr5=[3,1,5,7,17​​]; //初始陣列
function mySort(left,right) {
if(leftreturn 1;}//如果左邊元素小於右邊元素則交換兩數
else{
return -1;}//如果左邊元素大於等於右邊元素不做交換
}

當然上面的方法可以簡化為funaction mySort(left,right){ return right-left;}

複製程式碼 程式碼如下:

//依照偶數在前奇數在後排序
var oldArr6=[3,6,7, 18];//初始陣列
function mySort2(left,right){
if(left%2==0)return -1;//若左邊元素為偶數則不交換
if(right %2==0)return 1; //如果右邊元素為偶數則交換
return 0; //不交換
}

最後的slice不多講，只用來截取原數組中的部分元素，回傳一個新的數組，原始數組不會改變，其操作方式跟string的slice類似

複製程式碼 程式碼如下:

var oldArr7=[1,2,3,4];
oldArr7.slice(0)–>[1,2,3,4]
oldArr7.slice(0,2)–>[1,2]
oldArr7.slice(0,0)–>[]
oldArr7.slice(0,-1)–>[1, 2,3]
oldArr7.slice(-3,-1)–>[2,3]
oldArr4.slice(-1,-3)–[]