JavaScript數(shù)組操作函數(shù)匯總
js中數(shù)組操作函數(shù)還是非常多的,今天忽然想到來(lái)總結(jié)一下,也算是溫故而知新吧。不過(guò)不會(huì)針對(duì)每個(gè)辦法都進(jìn)行一下總結(jié),只是針對(duì)一些比較常用的做個(gè)備注一下。
這里總結(jié)到的 js 數(shù)組操作函數(shù)有:push,pop,join,shift,unshift,slice,splice,concat
(1)push 和 pop
這兩個(gè)函數(shù)都是對(duì)數(shù)組從尾部進(jìn)行壓入或彈出操作。push(arg1,arg2,...)可以每次壓入一個(gè)或多個(gè)元素,并返回更新后的數(shù)組長(zhǎng)度。注意如果參數(shù)也是數(shù)組的話,則是將全部數(shù)組當(dāng)做一個(gè)元素壓入到原本的數(shù)組里面去。pop() 函數(shù)則每次只會(huì)彈出結(jié)尾的元素,并返回彈出的元素,若是是對(duì)空組數(shù)調(diào)用 pop() 則返回undefined。
示例:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))//這里只會(huì)將[5,6]當(dāng)做一個(gè)元素來(lái)策畫,返回更新后的數(shù)組長(zhǎng)度5
此時(shí) oldArr = [1,2,3,4,[5,6]]
oldArr.pop()//這里彈出最后一個(gè)元素[5,6],而不是6
此時(shí) oldArr = [1,2,3,4]
oldArr.pop()-->4
oldArr.pop()-->3
oldArr.pop()-->2
oldArr.pop()-->1
alert(oldArr.pop())-->undefined(空數(shù)組彈出)
(2)unshift 和 shift
unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部,并將已經(jīng)存在的元素順次地移到較高的下標(biāo)處,以便留出空間。該方法的第一個(gè)參數(shù)將成為數(shù)組的新元素 0,如果還有第二個(gè)參數(shù),它將成為新的元素 1,以此類推。
請(qǐng)注意,unshift() 方法不創(chuàng)建新的創(chuàng)建,而是直接修改原有的數(shù)組。另外在 Internet Explorer 瀏覽器中 unshift() 無(wú)法執(zhí)行!
如下示例,我們將創(chuàng)建一個(gè)數(shù)組,并把一個(gè)元素添加到數(shù)組的開頭,并返回?cái)?shù)組的新長(zhǎng)度:
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>
輸出:
George,John,Thomas
4
William,George,John,Thomas
shift() 用于將數(shù)組的第一個(gè)元素從原數(shù)組中刪除,并返回第一個(gè)元素的值(即被刪除的元素的值)。
注意:若數(shù)組是空的,那么 shift() 將不進(jìn)行任何操縱,直接返回 undefined 值。另外該方法也不創(chuàng)建新數(shù)組,而是直接修改原有的 arrayObject。
示例:在本例中,我們將創(chuàng)建一個(gè)數(shù)組,并刪除數(shù)組的第一個(gè)元素:
<script type="text/javascript"> var arr = new Array arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join() + "<br />") document.write(arr.shift() + "<br />") document.write(arr.join()) </script>
輸出:
George,John,Thomas
George
John,Thomas
(3)join()
作用是將數(shù)組各個(gè)元素是通過(guò)指定的分隔符進(jìn)行連接成為一個(gè)字符串。其作用和toString()相同。
語(yǔ)法
arrayObject.join(separator)
參數(shù) separator 可選。指定要使用的分隔符。如果省略該參數(shù),則使用逗號(hào)作為分隔符。
示例:
var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join())
輸出
George,John,Thomas
(4)slice()
該方法可從已有的數(shù)組中返回選定的元素
語(yǔ)法
arrayObject.slice(start,end)
返回值
返回一個(gè)新的數(shù)組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。
注意:您可使用負(fù)值從數(shù)組的尾部選取元素。如果 end 未被規(guī)定,那么 slice() 方法會(huì)選取從 start 到數(shù)組結(jié)尾的所有元素。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join() + "<br />") document.write(arr.slice(1) + "<br />") document.write(arr.join()) </script>
輸出:
George,John,Thomas
John,Thomas
George,John,Thomas
(5)splice()
該方法用于插入、刪除或替換數(shù)組的元素。
語(yǔ)法
arrayObject.splice(index,howmany,element1,.....,elementX)
返回值
如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數(shù)組。
說(shuō)明
splice() 方法可刪除從 index 處開始的零個(gè)或多個(gè)元素,并且用參數(shù)列表中聲明的一個(gè)或多個(gè)值來(lái)替換那些被刪除的元素。需要注意的是 splice() 方法與 slice() 方法的作用是不同的,splice() 方法會(huì)直接對(duì)數(shù)組進(jìn)行修改。
示例:
例子 1
在本例中,我們將創(chuàng)建一個(gè)新數(shù)組,并向其添加一個(gè)元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr.join() + "<br />") arr.splice(2,0,"William") document.write(arr.join() + "<br />") </script>
輸出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我們將刪除位于 index 2 的元素,并添加一個(gè)新元素來(lái)替代被刪除的元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr.join() + "<br />") arr.splice(2,1,"William") document.write(arr.join()) </script>
輸出:
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
例子 3
在本例中我們將刪除從 index 2 ("Thomas") 開始的三個(gè)元素,并添加一個(gè)新元素 ("William") 來(lái)替代被刪除的元素:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr.join() + "<br />") arr.splice(2,3,"William") document.write(arr.join()) </script>
輸出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
(6)contact()
該方法用于連接兩個(gè)或多個(gè)數(shù)組。它不會(huì)改變現(xiàn)有的數(shù)組,而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。
語(yǔ)法
arrayObject.concat(arrayX,arrayX,......,arrayX)
示例:
例子 1
在本例中,我們將把 concat() 中的參數(shù)連接到數(shù)組 a 中:
<script type="text/javascript"> var a = [1,2,3]; document.write(a.concat(4,5)); </script>
輸出:
1,2,3,4,5
例子 2
在本例中,我們創(chuàng)建了兩個(gè)數(shù)組,然后使用 concat() 把它們連接起來(lái):
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" var arr2 = new Array(3) arr2[0] = "James" arr2[1] = "Adrew" arr2[2] = "Martin" document.write(arr.concat(arr2)) </script>
輸出:
George,John,Thomas,James,Adrew,Martin
例子 3
在本例中,我們創(chuàng)建了三個(gè)數(shù)組,然后使用 concat() 把它們連接起來(lái):
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" var arr2 = new Array(3) arr2[0] = "James" arr2[1] = "Adrew" arr2[2] = "Martin" var arr3 = new Array(2) arr3[0] = "William" arr3[1] = "Franklin" document.write(arr.concat(arr2,arr3)) </script>
輸出:
George,John,Thomas,James,Adrew,Martin,William,Franklin
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript數(shù)組的排序 sort()方法和reverse()方法
- js中reverse函數(shù)的用法詳解
- javascript 不用reverse實(shí)現(xiàn)字符串反轉(zhuǎn)的代碼
- javascript 數(shù)組排序函數(shù)sort和reverse使用介紹
- 在JavaScript中處理數(shù)組之reverse()方法的使用
- Javascript中數(shù)組sort和reverse用法分析
- JavaScript數(shù)組排序reverse()和sort()方法詳解
- JS數(shù)組方法shift()、unshift()用法實(shí)例分析
- JS數(shù)組方法push()、pop()用法實(shí)例分析
- JS數(shù)組方法join()用法實(shí)例分析
- 最實(shí)用的JS數(shù)組函數(shù)整理
- JS數(shù)組方法reverse()用法實(shí)例分析
相關(guān)文章
在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識(shí),包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
js實(shí)現(xiàn)簡(jiǎn)單頁(yè)面全屏
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單頁(yè)面全屏的功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
Webpack打包過(guò)程中處理ES6模塊的循環(huán)依賴問(wèn)題小結(jié)
Webpack通過(guò)“暫時(shí)性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時(shí)創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過(guò)程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
JS實(shí)現(xiàn)鼠標(biāo)框選效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)框選效果,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊出現(xiàn)框選效果的功能,同時(shí)下方實(shí)時(shí)顯示框選大小,涉及javascript鼠標(biāo)事件的響應(yīng)與頁(yè)面元素的動(dòng)態(tài)運(yùn)算技巧,需要的朋友可以參考下2016-06-06
七行JSON代碼把你的網(wǎng)站變成移動(dòng)應(yīng)用過(guò)程詳解
這篇文章主要介紹了七行JSON代碼把你的網(wǎng)站變成移動(dòng)應(yīng)用過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2019-07-07
JavaScript基礎(chǔ)知識(shí)之方法匯總結(jié)
本文給大家分享了javascript基礎(chǔ)知識(shí),包括數(shù)組的方法,函數(shù)的方法,數(shù)字的方法,對(duì)象的方法,字符串的方法,常規(guī)方法,正則表達(dá)式方法,本文介紹的非常詳細(xì),具有參考價(jià)值特此分享供大家參考2016-01-01
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯?wèn)題及解決方法,本文給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02

