Js數(shù)組的操作push,pop,shift,unshift等方法詳細(xì)介紹
js中針對(duì)數(shù)組操作的方法還是比較多的,今天突然想到來總結(jié)一下,也算是溫故而知新吧。不過不會(huì)針對(duì)每個(gè)方法進(jìn)行講解,我只是選擇其中的一些來講。
首先來講一下push和pop方法,這兩個(gè)方法只會(huì)對(duì)數(shù)組從尾部進(jìn)行壓入或彈出,而且是在原數(shù)組進(jìn)行操作,任何的改動(dòng)都是會(huì)影響到操作的數(shù)組。push(args)可以每次壓入多個(gè)元素,并返回更新后的數(shù)組長(zhǎng)度。pop()函數(shù)每次只會(huì)彈出最后一個(gè)結(jié)尾的元素,并返回彈出的元素,如果是對(duì)空組數(shù)調(diào)用pop()則返回undefined。 如果參數(shù)是數(shù)組則是將整個(gè)數(shù)組當(dāng)做一個(gè)元素壓入到原來的數(shù)組當(dāng)中。并不會(huì)產(chǎn)生類似concat合并數(shù)組時(shí)產(chǎn)生的“拆分現(xiàn)象”,下面看例子
例1:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))–>5(這里只會(huì)將[5,6]當(dāng)做一個(gè)元素來計(jì)算,返回更新后的數(shù)組長(zhǎng)度5)
此時(shí)oldArr–>[1,2,3,4,[5,6]]
alert(oldArr.pop())–>[5,6](這里彈出最后一個(gè)元素[5,6],而不是6)
此時(shí)oldArr–>[1,2,3,4]
oldArr.pop()–>4
oldArr.pop()–>3
oldArr.pop()–>2
oldArr.pop()–>1
oldArr.pop()–>undefined(空數(shù)組彈出)
現(xiàn)在講完push和pop再來看一下unshift和shift
這兩個(gè)方法都是通過對(duì)數(shù)組的頭部進(jìn)行的操作,其他基本跟push和pop類似,但是在IE中unshift方法返回的是undefined
例2:
var oldArr2=[1,2];
oldArr2.unshift(3)–>undefined
此時(shí)oldArr2為–>[3,1,2]
oldArr2.shift()–>3
此時(shí)oldArr2為[1,2]
接下來看一下功能強(qiáng)大一點(diǎn)的splice,利用其可以進(jìn)行數(shù)組隨意位置的元素添加,刪除 ,其操作也是在原有
數(shù)組上修改
splice(start,deleteCnt,args) 中的start表示開始操作下標(biāo),deleteCnt表示從開始下標(biāo)開始(包括該元素)要?jiǎng)h除的元素個(gè)數(shù),刪除操作返回刪除的元素。args表示用來替換刪除掉的那些元素(可以有多個(gè)參數(shù)),start和deleteCnt必須為數(shù)字,如果不是數(shù)字嘗試轉(zhuǎn)換,轉(zhuǎn)換失敗當(dāng)做0來處理。splice必須至少有一個(gè)start元素,否則不做任何操作。deleteCnt不存在表示刪除start及后面的全部元素(IE下,取0不做刪除)。start可以為負(fù)數(shù),表示從數(shù)組右邊結(jié)尾處開始計(jì)算。deleteCnt如果為負(fù)數(shù)不做刪除,因?yàn)椴豢赡軇h除負(fù)個(gè)元素。
好了解釋就到這邊現(xiàn)在看一下例子,通過例子或許可以更好的理解
例3:
var oldArr3=[1,2];
oldArr3.splice()–>”"(返回空的字符串,不做任何操作,操作后oldArr3–>[1,2])
oldArr3.splice(“”)–>[1,2](“”嘗試轉(zhuǎn)換為數(shù)字失敗返回0,所以刪除1,2,操作后oldArr3–>[],但是IE下有點(diǎn)惡心,不做任何操作)
oldArr3.splice(“1a”)–>同上
odlArr3.splice(0,2)–>[1,2](“從下標(biāo)0的元素開始,刪除兩個(gè)元素1,2因此刪除后oldArr3–>[])
oldArr3.splice(0,-1)–>”"(從0下標(biāo)開始刪除-1個(gè)元素,故等于沒做任何操作,操作后oldArr3–>[1,2])
oldArr3.splice(1,1)–>2(從下標(biāo)1 開始刪除1個(gè)元素,即刪除2,所以刪除后oldArr3–>[1])
oldArr3.splice(1,4)–>2(從下標(biāo)1 開始刪除4個(gè)元素,1開始只有1個(gè)元素,故刪除2,所以刪除后oldArr3–>[1])
oldArr3.splice(-1,0,3)–>”"(從下標(biāo)-1即2元素開始刪除0個(gè)元素,然后添加元素3,所以操作后oldArr3–>[1,3,2])
oldArr3.splice(-1,1,3)–>2(從小標(biāo)-1即2元素開始刪除1個(gè)元素,然后添加元素3,操作后為oldArr3–>[1,3])
OK接下來開始講concat,這個(gè)方法用來連接兩個(gè)或多個(gè)數(shù)組,該數(shù)組不會(huì)改變?cè)瓉淼臄?shù)組只會(huì)返回新的一個(gè)數(shù)組。連接的時(shí)候參數(shù)如果為數(shù)組,則連接的是數(shù)組中的元素。因?yàn)楸容^簡(jiǎn)單直接開始例子
例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]整個(gè)用來添加,而不是拆開)
下面來講數(shù)組中的排序方法sort
sort(function)是針對(duì)原數(shù)組進(jìn)行的排序,不會(huì)生成新的數(shù)組。默認(rèn)sort()不帶參數(shù)時(shí)按照數(shù)組中的元素轉(zhuǎn)換成字符串進(jìn)行比較,比較的時(shí)候按照字符在字符編碼中的順序進(jìn)行排序,每個(gè)字符都有一個(gè)唯一的編碼與其對(duì)應(yīng)。
且看下面例子
var oldArr5=[3,1,5,7,17] 看這個(gè)一般觀念上以為對(duì)oldArr5排序時(shí)oldArr5.sort()會(huì)按照數(shù)字從小到大排序即返回[1,3,5,7,17],但是看一下結(jié)果其實(shí)不然返回的是[1,17,3,5,7] 因?yàn)楸容^的時(shí)候都被轉(zhuǎn)成字符串。然后對(duì)字符串進(jìn)行一個(gè)個(gè)的比較如果第一個(gè)字符相同則比較第二個(gè),否則直接返回比較結(jié)果,因?yàn)椤?7″<”3″所以可想而知排序的結(jié)果就不是一般印象中的那個(gè)結(jié)果了。
sort(function)方法除了默認(rèn)的無參外還可以傳入自定義的排序方法,這樣排序的結(jié)果完全可以由自己來控制了,想怎么排就怎么排,是不是很爽啊,呵呵。 一般自定義的function比較函數(shù),包含兩個(gè)參數(shù)分別代表用來比較的左元素和右元素。然后通過一定方式返回一個(gè)結(jié)果,如果返回值大于0表示交換左右元素,如果返回值小于0或等于0則表示不不會(huì)交換左右元素。現(xiàn)在來看一下例子
例5:
按照數(shù)字從大到小排列原有數(shù)組
var oldArr5=[3,1,5,7,17]; //初始數(shù)組
function mySort(left,right){
if(left<right){
return 1;}//如果左邊元素小于右邊元素則交換兩數(shù)
else{
return -1;}//如果左邊元素大于等于右邊元素不做交換
}
當(dāng)然上面的方法可以簡(jiǎn)化為funaction mySort(left,right){ return right-left;}
//按照偶數(shù)在前奇數(shù)在后排序
var oldArr6=[3,6,7,18];//初始數(shù)組
function mySort2(left,right){
if(left%2==0)return -1;//如果左邊元素為偶數(shù)則不交換
if(right%2==0)return 1; //如果右邊元素為偶數(shù)則交換
return 0; //不交換
}
最后的slice不多講,只是用來截取原數(shù)組中的部分元素,返回一個(gè)新的數(shù)組,原數(shù)組不會(huì)改變,其操作方式跟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)–[]
相關(guān)文章
mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式
這篇文章主要介紹了mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式,本文重點(diǎn)給大家講解了第一種方式,需要的朋友可以參考下2019-10-10解決在layer.open中使用時(shí)間控件laydate失敗的問題
今天小編就為大家分享一篇解決在layer.open中使用時(shí)間控件laydate失敗的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過程
項(xiàng)目中經(jīng)常會(huì)遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08如何在JavaScript實(shí)現(xiàn)Blob文件流下載
在JavaScript中可以使用瀏覽器提供的Blob對(duì)象和URL.createObjectURL()方法來實(shí)現(xiàn)文件流下載,這篇文章主要給大家介紹了關(guān)于如何在JavaScript實(shí)現(xiàn)Blob文件流下載的相關(guān)資料,需要的朋友可以參考下2024-05-05layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09用Javascript實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn)
本文介紹的方法,實(shí)現(xiàn)了錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn),效果非常不錯(cuò)。2009-09-09ImageZoom 圖片放大鏡效果(多功能擴(kuò)展篇)
上一篇ImageZoom已經(jīng)對(duì)圖片放大效果做了詳細(xì)的分析,這次在ImageZoom的基礎(chǔ)上進(jìn)行擴(kuò)展,實(shí)現(xiàn)更多的效果。2010-04-04