JavaScript中操做數組的方法

對數組操做的方法分爲兩種 一種是會改變原始數組的變異方法,還有一種是不會改變原始數組的非變異方法。javascript

變異方法 (mutation method)

1.splice() 方法

定義和用法java

splice() 方法向/從數組中添加/刪除項目,而後返回被刪除的項目。數組

語法app

arrayObject.splice(index,howmany,item1,.....,itemX)函數

index         必需。整數,規定添加/刪除項目的位置,使用負數可從數組結尾處規定位置。this

howmany          必需。要刪除的項目數量。若是設置爲 0,則不會刪除項目。編碼

item1, ..., itemX       可選。向數組添加的新項目。spa

返回值code

Array類型        包含被刪除項目的新數組,若是有的話。對象

說明

splice() 方法可刪除從 index 處開始的零個或多個元素,而且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

若是從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組。

註釋:請注意,splice() 方法與 slice() 方法的做用是不一樣的,splice() 方法會直接對數組進行修改。

實例

例子 1

在本例中,咱們將建立一個新數組,並向其添加一個元素

<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

例子 2

在本例中咱們將刪除位於 index 2 的元素,並添加一個新元素來替代被刪除的元素:

<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,1,"William") document.write(arr) </script>

輸出:

George,John,Thomas,James,Adrew,Martin

George,John,William,James,Adrew,Martin

例子 3

在本例中咱們將刪除從 index 2 ("Thomas") 開始的三個元素,並添加一個新元素 ("William") 來替代被刪除的元素:

<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,3,"William") document.write(arr) </script>

輸出:

George,John,Thomas,James,Adrew,Martin

George,John,William,Martin

2. push() 方法

push() 方法可向數組的末尾添加一個或多個元素,並返回新的長度。

語法

arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1  必需。要添加到數組的第一個元素。

newelement2  可選。要添加到數組的第二個元素。

newelementX  可選。可添加多個元素。

返回值

把指定的值添加到數組後的新長度。

說明

push() 方法可把它的參數順序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是建立一個新的數組。push() 方法和 pop() 方法使用數組提供的先進後出棧的功能。

提示和註釋

註釋:該方法會改變數組的長度。

提示:要想數組的開頭添加一個或多個元素,請使用 unshift() 方法。

實例

在本例中,咱們將建立一個數組,並經過添加一個元素來改變其長度:

<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. pop() 方法

pop() 方法用於刪除並返回數組的最後一個元素。

語法

arrayObject.pop()

返回值

arrayObject 的最後一個元素。

說明

pop() 方法將刪除 arrayObject 的最後一個元素,把數組長度減 1,而且返回它刪除的元素的值。若是數組已經爲空,則 pop() 不改變數組,並返回 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

 

4. shift() 方法

shift() 方法用於把數組的第一個元素從其中刪除,並返回第一個元素的值。

語法

arrayObject.shift()

返回值

數組原來的第一個元素的值。

說明

若是數組是空的,那麼 shift() 方法將不進行任何操做,返回 undefined 值。請注意,該方法不建立新數組,而是直接修改原有的 arrayObject。

提示和註釋

註釋:該方法會改變數組的長度。

提示:要刪除並返回數組的最後一個元素,請使用 pop() 方法。

實例

在本例中,咱們將建立一個數組,並刪除數組的第一個元素。請注意,這也將改變數組的長度:

<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

5.unshift() 方法

unshift() 方法可向數組的開頭添加一個或更多元素,並返回新的長度。

語法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

參數         描述

newelement1  必需。向數組添加的第一個元素。

newelement2  可選。向數組添加的第二個元素。

newelementX  可選。可添加若干個元素。

返回值

arrayObject 的新長度。

說明

unshift() 方法將把它的參數插入 arrayObject 的頭部,並將已經存在的元素順次地移到較高的下標處,以便留出空間。該方法的第一個參數將成爲數組的新元素 0,若是還有第二個參數,它將成爲新的元素 1,以此類推。

請注意,unshift() 方法不建立新的建立,而是直接修改原有的數組。

提示和註釋

註釋:該方法會改變數組的長度。

註釋:unshift() 方法沒法在 Internet Explorer 中正確地工做!

提示:要把一個或多個元素添加到數組的尾部,請使用 push() 方法。

實例

在本例中,咱們將建立一個數組,並把一個元素添加到數組的開頭,並返回數組的新長度:

<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

6.sort() 方法 

sort() 方法用於對數組的元素進行排序。

語法

arrayObject.sort(sortby)

參數         描述

sortby       可選。規定排序順序。必須是函數。

返回值

對數組的引用。請注意,數組在原數組上進行排序,不生成副本。

說明

若是調用該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現這一點,首先應把數組的元素都轉換成字符串(若有必要),以便進行比較。

若是想按照其餘標準進行排序,就須要提供比較函數,該函數要比較兩個值,而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b,其返回值以下:

若 a 小於 b,在排序後的數組中 a 應該出如今 b 以前,則返回一個小於 0 的值。

若 a 等於 b,則返回 0。

若 a 大於 b,則返回一個大於 0 的值。

實例

例子 1

在本例中,咱們將建立一個數組,並按字母順序進行排序:

<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 />")

document.write(arr.sort())

 

</script>

輸出:

George,John,Thomas,James,Adrew,Martin

Adrew,George,James,John,Martin,Thomas

例子 2

在本例中,咱們將建立一個數組,並按字母順序進行排序:

<script type="text/javascript">

 

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())

 

</script>

  

輸出:

10,5,40,25,1000,1

1,10,1000,25,40,5

請注意,上面的代碼沒有按照數值的大小對數字進行排序,要實現這一點,就必須使用一個排序函數:

<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

 7.reverse() 方法

reverse() 方法用於顛倒數組中元素的順序。

語法

arrayObject.reverse()

提示和註釋

註釋:該方法會改變原來的數組,而不會建立新的數組。

實例

在本例中,咱們將建立一個數組,而後顛倒其元素的順序:

<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

 

非變異 (non-mutating method) 方法

1.filter() 方法

filter() 方法建立一個新的數組,新數組中的元素是經過檢查指定數組中符合條件的全部元素。

注意: filter() 不會對空數組進行檢測。

注意: filter() 不會改變原始數組。

語法

array.filter(function(currentValue,index,arr), thisValue)

參數說明

function(currentValue, index,arr)    必須。函數,數組中的每一個元素都會執行這個函數

函數參數:

currentValue    必須。當前元素的值

index         可選。當期元素的索引值

arr    可選。當期元素屬於的數組對象

thisValue 可選。對象做爲該執行回調時使用,傳遞給函數,用做 "this" 的值。

若是省略了 thisValue ,"this" 的值爲 "undefined"

 

返回值:返回數組,包含了符合條件的全部元素。若是沒有符合條件的元素則返回空數組。

實例:

返回數組 ages 中全部元素都大於輸入框指定數值的元素:

<p>最小年齡: <input type="number" id="ageToCheck" value="18"></p>

<button onclick="myFunction()">點我</button>

 

<p>全部大於指定數組的元素有? <span id="demo"></span></p>

 

<script>

var ages = [32, 33, 12, 40];

 

function checkAdult(age) {

    return age >= document.getElementById("ageToCheck").value;

}

 

function myFunction() {

    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

</script>

  

2.concat() 方法

concat() 方法用於鏈接兩個或多個數組。

該方法不會改變現有的數組,而僅僅會返回被鏈接數組的一個副本。

語法

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX      必需。該參數能夠是具體的值,也能夠是數組對象。能夠是任意多個。

返回值

返回一個新的數組。該數組是經過把全部 arrayX 參數添加到 arrayObject 中生成的。若是要進行 concat() 操做的參數是數組,那麼添加的是數組中的元素,而不是數組。

實例

例子 1

在本例中,咱們將把 concat() 中的參數鏈接到數組 a 中:

<script type="text/javascript">

 

var a = [1,2,3];

document.write(a.concat(4,5));

 

</script>

輸出:

1,2,3,4,5

例子 2

在本例中,咱們建立了兩個數組,而後使用 concat() 把它們鏈接起來:

<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

在本例中,咱們建立了三個數組,而後使用 concat() 把它們鏈接起來:

<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

3. slice() 方法

slice() 方法可提取字符串的某個部分,並以新的字符串返回被提取的部分。

語法

stringObject.slice(start,end)

start         要抽取的片段的起始下標。若是是負數,則該參數規定的是從字符串的尾部開始算起的位置。也就是說,-1 指字符串的最後一個字符,-2 指倒數第二個字符,以此類推。

end  緊接着要抽取的片斷的結尾的下標。若未指定此參數,則要提取的子串包括 start 到原字符串結尾的字符串。若是該參數是負數,那麼它規定的是從字符串的尾部開始算起的位置。

返回值

一個新的字符串。包括字符串 stringObject 從 start 開始(包括 start)到 end 結束(不包括 end)爲止的全部字符。

說明

String 對象的方法 slice()、substring() 和 substr() (不建議使用)均可返回字符串的指定部分。slice() 比 substring() 要靈活一些,由於它容許使用負數做爲參數。slice() 與 substr() 有所不一樣,由於它用兩個字符的位置來指定子串,而 substr() 則用字符位置和長度來指定子串。

還要注意的是,String.slice() 與 Array.slice() 類似。

實例

例子 1

在本例中,咱們將提取從位置 6 開始的全部字符:

<script type="text/javascript">

 

var str="Hello happy world!"

document.write(str.slice(6))

 

</script>

  

輸出:

happy world!

  

例子 2

在本例中,咱們將提取從位置 6 到位置 11 的全部字符:

<script type="text/javascript">

 

var str="Hello happy world!"

document.write(str.slice(6,11))

 

</script>

  

輸出:

happy
相關文章
相關標籤/搜索