1. 程式人生 > >Js陣列的操作push,pop,shift,unshift等方法

Js陣列的操作push,pop,shift,unshift等方法

原文地址:http://www.jb51.net/article/32898.htm

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,這個方法用來連線兩個或多個數組,該陣列不會改變原來的陣列只會返回新的一個數組。連線的時候引數如果為陣列,則連線的是陣列中的元素。因為比較簡單直接開始例子 

例4: 
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″<”3″所以可想而知排序的結果就不是一般印象中的那個結果了。

sort(function)方法除了預設的無參外還可以傳入自定義的排序方法,這樣排序的結果完全可以由自己來控制了,想怎麼排就怎麼排,是不是很爽啊,呵呵。 一般自定義的function比較函式,包含兩個引數分別代表用來比較的左元素和右元素。然後通過一定方式返回一個結果,如果返回值大於0表示交換左右元素,如果返回值小於0或等於0則表示不不會交換左右元素。現在來看一下例子 

例5: 
按照數字從大到小排列原有陣列 

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


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

oldArr.sort(mySort); ///


//按照偶數在前奇數在後排序 
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)–[]