卡卡網(wǎng)

在本文中，我們將了解在 JavaScript 中從數(shù)組中添加和刪除元素的各種方法。

以下是用于添加或刪除項(xiàng)目的不同數(shù)組方法的快速參考表。點(diǎn)擊方法名稱跳轉(zhuǎn)到下面的描述。

什么是 JavaScript 中的數(shù)組？

數(shù)組是一種特殊變量，一次可以保存多個(gè)值。每個(gè)值用逗號(hào)分隔。

這些值可以是字符串：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

或者它們可以是對(duì)象：

const people = [
    { name: "patrick", age: 21 },
    { name: "chimamanda", age: 25 },
    { name: "joe", age: 32 },
    { name: "sam", age: 16 },
]

值也可以是任何數(shù)據(jù)類(lèi)型，包括數(shù)字、布爾值，甚至是另一個(gè)數(shù)組。

你可以使用數(shù)組方法操作或獲取有關(guān)數(shù)組的信息。例如，我們可以使用以下reverse()方法反轉(zhuǎn)數(shù)組：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

let reversedPeople = people.reverse()

console.log(reversedPeople)

// ["sam", "joe", "chimamanda", "Patrick"]

我們還可以使用該includes()方法檢查數(shù)組中是否存在值：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

console.log(people.includes('sam')) // true
console.log(people.includes('jack')) // false

具體來(lái)說(shuō)，讓我們看一下負(fù)責(zé)將項(xiàng)插入數(shù)組和從數(shù)組中刪除項(xiàng)的方法。

從數(shù)組中刪除最后一項(xiàng) pop()

該pop()方法從數(shù)組中刪除最后一個(gè)值并返回該值。

const people = ['patrick', 'chimamanda', 'joe', 'sam']

const lastPerson = people.pop()

console.log(lastPerson) // "sam"
console.log(people) // ["patrick", "chimamanda", "joe"]

當(dāng)pop()在people數(shù)組上調(diào)用時(shí)，數(shù)組中的最后一個(gè)值被刪除并分配給lastPerson，原始數(shù)組 ( people) 也發(fā)生了變異。

pop()方法

pop() 方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素。

語(yǔ)法

arrayObject.pop()

返回值

arrayObject 的最后一個(gè)元素。

說(shuō)明

pop() 方法將刪除 arrayObject 的最后一個(gè)元素，把數(shù)組長(zhǎng)度減 1，并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 undefined 值。 

實(shí)例

在本例中，我們將創(chuàng)建一個(gè)數(shù)組，然后刪除數(shù)組的最后一個(gè)元素。請(qǐng)注意，這也會(huì)改變數(shù)組的程度：

<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

shift()方法

shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。

語(yǔ)法

arrayObject.shift()

返回值

數(shù)組原來(lái)的第一個(gè)元素的值。

說(shuō)明

如果數(shù)組是空的，那么 shift() 方法將不進(jìn)行任何操作，返回 undefined 值。請(qǐng)注意，該方法不創(chuàng)建新數(shù)組，而是直接修改原有的 arrayObject。

提示和注釋

注釋：該方法會(huì)改變數(shù)組的長(zhǎng)度。

提示：要?jiǎng)h除并返回?cái)?shù)組的最后一個(gè)元素，請(qǐng)使用 pop() 方法。

實(shí)例

在本例中，我們將創(chuàng)建一個(gè)數(shù)組，并刪除數(shù)組的第一個(gè)元素。請(qǐng)注意，這也將改變數(shù)組的長(zhǎng)度：

<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

push()方法

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。

語(yǔ)法

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

參數(shù)

• newelement1 必需。要添加到數(shù)組的第一個(gè)元素。
• newelement2 可選。要添加到數(shù)組的第二個(gè)元素。
• newelementX 可選?？商砑佣鄠€(gè)元素。

返回值

把指定的值添加到數(shù)組后的新長(zhǎng)度。

說(shuō)明

push() 方法可把它的參數(shù)順序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是創(chuàng)建一個(gè)新的數(shù)組。push() 方法和 pop() 方法使用數(shù)組提供的先進(jìn)后出棧的功能。

提示和注釋

注釋：該方法會(huì)改變數(shù)組的長(zhǎng)度。

實(shí)例

在本例中，我們將創(chuàng)建一個(gè)數(shù)組，并通過(guò)添加一個(gè)元素來(lái)改變其長(zhǎng)度：

<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

unshift()方法

unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

語(yǔ)法

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

參數(shù)

• newelement1 必需。要添加到數(shù)組的第一個(gè)元素。
• newelement2 可選。要添加到數(shù)組的第二個(gè)元素。
• newelementX 可選?？商砑佣鄠€(gè)元素。

返回值

arrayObject 的新長(zhǎng)度。

說(shuō)明

unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部，并將已經(jīng)存在的元素順次地移到較高的下標(biāo)處，以便留出空間。該方法的第一個(gè)參數(shù)將成為數(shù)組的新元素 0，如果還有第二個(gè)參數(shù)，它將成為新的元素 1，以此類(lèi)推。

請(qǐng)注意，unshift() 方法不創(chuàng)建新的創(chuàng)建，而是直接修改原有的數(shù)組。

提示和注釋

注釋：該方法會(huì)改變數(shù)組的長(zhǎng)度。

注釋：unshift() 方法無(wú)法在 Internet Explorer 中正確地工作！

提示：要把一個(gè)或多個(gè)元素添加到數(shù)組的尾部，請(qǐng)使用 push() 方法。

實(shí)例

在本例中，我們將創(chuàng)建一個(gè)數(shù)組，并把一個(gè)元素添加到數(shù)組的開(kāi)頭，并返回?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 + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>

輸出

George,John,Thomas
4
William,George,John,Thomas

splice()方法

splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

注釋：該方法會(huì)改變?cè)紨?shù)組。

語(yǔ)法

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

參數(shù)

• 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)目。

返回值

Array 包含被刪除項(xiàng)目的新數(shù)組，如果有的話。

說(shuō)明

splice() 方法可刪除從 index 處開(kāi)始的零個(gè)或多個(gè)元素，并且用參數(shù)列表中聲明的一個(gè)或多個(gè)值來(lái)替換那些被刪除的元素。

如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。

提示和注釋

請(qǐng)注意，splice() 方法與 slice() 方法的作用是不同的，splice() 方法會(huì)直接對(duì)數(shù)組進(jìn)行修改。

實(shí)例

例子 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 + "<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 的元素，并添加一個(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 + "<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") 開(kāi)始的三個(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 + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

輸出

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

總結(jié)

本文介紹了從數(shù)組中添加和刪除元素的各種方法，這些方法有一些使用上的區(qū)別，以及使用時(shí)需要注意的地方，文章中都進(jìn)行了詳細(xì)的介紹。

標(biāo)簽: 數(shù)組  Array