JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)
數(shù)組常用方法總結(jié):
下面我只總結(jié)了es3中常用的數(shù)組方法,一共有11個(gè)。es5中新增的9個(gè)數(shù)組方法,后續(xù)再單獨(dú)總結(jié)。
1個(gè)連接數(shù)組的方法:concat()
2個(gè)數(shù)組轉(zhuǎn)換為字符串的方法:join()、toString()
6個(gè)增刪數(shù)組元素的方法:pop()、push()、shift()、unshift()、slice()、splice()
2個(gè)數(shù)組排序方法:reverse()、sort()
連接數(shù)組的方法:
1、concat()
作用:連接兩個(gè)數(shù)組,合并為一個(gè)新數(shù)組。
用法:arr1.concat(arr2,arr2...)
示例:
<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
數(shù)組轉(zhuǎn)換為字符串的方法:
1、join()
作用:用于把數(shù)組中的所有元素放入一個(gè)字符串。并通過指定的分隔符進(jìn)行分隔。
用法:arrayObject.join(separator)
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) </script>
輸出:
George.John.Thomas
注意:返回值為一個(gè)字符串。如果沒有分隔符,默認(rèn)以逗號(hào)分隔。
2、toString()
作用:把數(shù)組轉(zhuǎn)換為字符串,并返回結(jié)果。
用法:arrayObject.toString()
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George"; arr[1] = "John"; arr[2] = "Thomas"; document.write(arr.toString()); </script>
輸出:
George,John,Thomas
返回值與沒有參數(shù)的 join() 方法返回的字符串相同。數(shù)組中的元素之間用逗號(hào)分隔。
增刪數(shù)組元素的方法:
1、pop()
作用:用于刪除并返回?cái)?shù)組的最后一個(gè)元素。
用法:arrayObject.pop()
pop() 方法將刪除 arrayObject 的最后一個(gè)元素,把數(shù)組長(zhǎng)度減 1,并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空,則 pop() 不改變數(shù)組,并返回 undefined 值。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr) document.write("<br />") document.write(arr.pop()) document.write("<br />") document.write(arr) </script>
輸出:
George,John,Thomas Thomas George,John
2、push()
作用:可向數(shù)組的末尾添加一個(gè)或多個(gè)元素,并返回新的長(zhǎng)度。
用法:arrayObject.push(newelement1,newelement2,....,newelementX)
它直接修改 arrayObject,而不是創(chuàng)建一個(gè)新的數(shù)組。push() 方法和 pop() 方法使用數(shù)組提供的先進(jìn)后出棧的功能。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.push("James") + "<br />") document.write(arr) </script>
輸出:
George,John,Thomas 4 George,John,Thomas,James
3、shift()
作用:用于把數(shù)組的第一個(gè)元素從其中刪除,并返回第一個(gè)元素的值。
用法:arrayObject.shift()
如果數(shù)組是空的,那么 shift() 方法將不進(jìn)行任何操作,返回 undefined 值。請(qǐng)注意,該方法不創(chuàng)建新數(shù)組,而是直接修改原有的 arrayObject。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.shift() + "<br />") document.write(arr) </script>
輸出:
George,John,Thomas George John,Thomas
4,unshift()
作用:可向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。
用法:arrayObject.unshift(newelement1,newelement2,....,newelementX)
unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部,并將已經(jīng)存在的元素順次地移到較高的下標(biāo)處,以便留出空間。該方法的第一個(gè)參數(shù)將成為數(shù)組的新元素 0,如果還有第二個(gè)參數(shù),它將成為新的元素 1,以此類推。
請(qǐng)注意,unshift() 方法不創(chuàng)建新的創(chuàng)建,而是直接修改原有的數(shù)組。unshift() 方法無(wú)法在 Internet Explorer 中正確地工作!
示例:
<script type="text/javascript"> var arr = new Array() arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.unshift("William") + "<br />") document.write(arr) </script>
輸出:
George,John,Thomas 4 William,George,John,Thomas
5,slice()
作用:可從已有的數(shù)組中返回選定的元素。
用法:arrayObject.slice(start,end)
start |
必需。規(guī)定從何處開始選取。如果是負(fù)數(shù),那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說,-1 指最后一個(gè)元素,-2 指倒數(shù)第二個(gè)元素,以此類推。 |
end |
可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù),那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù),那么它規(guī)定的是從數(shù)組尾部開始算起的元素。 |
返回一個(gè)新的數(shù)組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。
該方法并不會(huì)修改數(shù)組,而是返回一個(gè)子數(shù)組。如果想刪除數(shù)組中的一段元素,應(yīng)該使用方法 Array.splice()。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.slice(1) + "<br />") document.write(arr) </script>
輸出:
George,John,Thomas John,Thomas George,John,Thomas
6,splice()
作用:向/從數(shù)組中添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目。
用法:arrayObject.splice(index,howmany,item1,.....,itemX)
index |
必需。整數(shù),規(guī)定添加/刪除項(xiàng)目的位置,使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。 |
howmany |
必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0,則不會(huì)刪除項(xiàng)目。 |
item1, ..., itemX |
可選。向數(shù)組添加的新項(xiàng)目。 |
該方法會(huì)改變?cè)紨?shù)組。
示例:
<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 + "<br />")arr.splice(2,0,"William") document.write(arr + "<br />") </script>
輸出:
George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin
數(shù)組元素排序:
1、reverse()
作用:用于顛倒數(shù)組中元素的順序。
用法:arrayObject.reverse()
該方法會(huì)改變?cè)瓉?lái)的數(shù)組,而不會(huì)創(chuàng)建新的數(shù)組。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.reverse()) </script>
輸出:
George,John,Thomas Thomas,John,George
2,sort()
作用:用于對(duì)數(shù)組的元素進(jìn)行排序。
用法:arrayObject.sort(sortby)
Sortby:可選,按規(guī)定是順序排序。必須是函數(shù)。
相對(duì)于其他方法來(lái)說復(fù)雜了一點(diǎn)。
如果調(diào)用該方法時(shí)沒有使用參數(shù),將按字母順序?qū)?shù)組中的元素進(jìn)行排序,說得更精確點(diǎn),是按照字符編碼的順序進(jìn)行排序。
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個(gè)值,然后返回一個(gè)用于說明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b,其返回值如下:
若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個(gè)小于 0 的值。
若 a 等于 b,則返回 0。
若 a 大于 b,則返回一個(gè)大于 0 的值。
<script type="text/javascript"> function sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
輸出:
10,5,40,25,1000,1 1,5,10,25,40,1000
上面這個(gè)例子是讓數(shù)組元素從小到大排序,如果想實(shí)現(xiàn)從大到小排序,只需要將sortNumber函數(shù)中的a-b改為b-a即可。
<script type="text/javascript"> function sortNumber(a,b) { return b - a; } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
輸出:
10,5,40,25,1000,1 1000,40,25,10,5,1
補(bǔ)充:
數(shù)組對(duì)象的屬性:
屬性 |
描述 |
constructor |
返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。 |
length |
設(shè)置或返回?cái)?shù)組中元素的數(shù)目。 |
prototype |
使您有能力向?qū)ο筇砑訉傩院头椒ā?/p> |
以下這個(gè)例子展示了如何使用constructor屬性
<script type="text/javascript"> var test=new Array(); if (test.constructor==Array) { document.write("This is an Array"); } if (test.constructor==Boolean) { document.write("This is a Boolean"); } if (test.constructor==Date) { document.write("This is a Date"); } if (test.constructor==String) { document.write("This is a String"); } </script>
輸出:
This is an Array
length 屬性可設(shè)置或返回?cái)?shù)組中元素的數(shù)目。數(shù)組的 length 屬性總是比數(shù)組中定義的最后一個(gè)元素的下標(biāo)大 1。對(duì)于那些具有連續(xù)元素,而且以元素 0 開始的常規(guī)數(shù)組而言,屬性 length 聲明了數(shù)組中的元素的個(gè)數(shù)。設(shè)置 length 屬性可改變數(shù)組的大小。如果設(shè)置的值比其當(dāng)前值小,數(shù)組將被截?cái)啵湮膊康脑貙G失。如果設(shè)置的值比它的當(dāng)前值大,數(shù)組將增大,新的元素被添加到數(shù)組的尾部,它們的值為 undefined。
獲取數(shù)組的長(zhǎng)度:arrayObject.length
以上這篇JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JavaScript數(shù)組方法大全(推薦)
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- js 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法
- 數(shù)組方法解決JS字符串連接性能問題有爭(zhēng)議
- javascript中FOREACH數(shù)組方法使用示例
- js數(shù)組方法reduce經(jīng)典用法代碼分享
- js數(shù)組方法擴(kuò)展實(shí)現(xiàn)數(shù)組統(tǒng)計(jì)函數(shù)
- 基于JavaScript Array數(shù)組方法(新手必看篇)
- Javascript中數(shù)組方法匯總(推薦)
- 可能被忽略的一些JavaScript數(shù)組方法細(xì)節(jié)
相關(guān)文章
js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載 提升網(wǎng)頁(yè)打開速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載,提升網(wǎng)頁(yè)打開速度,感興趣的小伙伴們可以參考一下2016-01-01用客戶端js實(shí)現(xiàn)帶省略號(hào)的分頁(yè)
帶省略號(hào)的分頁(yè)只有在服務(wù)器端才可以實(shí)現(xiàn),下面為大家介紹的是用js實(shí)現(xiàn)的帶省略號(hào)的分頁(yè),感興趣的朋友可以參考下哈,希望對(duì)你寫出好的分頁(yè)有所幫助2013-04-04uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參詳解(webview)
在單位做項(xiàng)目的時(shí)候碰到一個(gè)需求,需要從微信小程序跳轉(zhuǎn)到H5頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08javascript中函數(shù)的寫法實(shí)例代碼詳解
這篇文章主要介紹了javascript中函數(shù)的寫法 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-02JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè)
這篇文章主要介紹了技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè),非常有創(chuàng)意、有意思,需要的朋友可以參考下2014-07-07