卡卡網(wǎng)

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

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

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

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

這些值可以是字符串：

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

或者它們可以是對象：

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

值也可以是任何數(shù)據(jù)類型，包括數(shù)字、布爾值，甚至是另一個數(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

具體來說，讓我們看一下負責(zé)將項插入數(shù)組和從數(shù)組中刪除項的方法。

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

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

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ù)組中的最后一個值被刪除并分配給lastPerson，原始數(shù)組 ( people) 也發(fā)生了變異。

pop()方法

pop() 方法用于刪除并返回數(shù)組的最后一個元素。

語法

arrayObject.pop()

返回值

arrayObject 的最后一個元素。

說明

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

實例

在本例中，我們將創(chuàng)建一個數(shù)組，然后刪除數(shù)組的最后一個元素。請注意，這也會改變數(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ù)組的第一個元素從其中刪除，并返回第一個元素的值。

語法

arrayObject.shift()

返回值

數(shù)組原來的第一個元素的值。

說明

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

提示和注釋

注釋：該方法會改變數(shù)組的長度。

提示：要刪除并返回數(shù)組的最后一個元素，請使用 pop() 方法。

實例

在本例中，我們將創(chuàng)建一個數(shù)組，并刪除數(shù)組的第一個元素。請注意，這也將改變數(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.shift() + "<br />")
document.write(arr)

</script>

輸出

George,John,Thomas
George
John,Thomas

push()方法

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

語法

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

參數(shù)

• newelement1 必需。要添加到數(shù)組的第一個元素。
• newelement2 可選。要添加到數(shù)組的第二個元素。
• newelementX 可選。可添加多個元素。

返回值

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

說明

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

提示和注釋

注釋：該方法會改變數(shù)組的長度。

實例

在本例中，我們將創(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.push("James") + "<br />")
document.write(arr)

</script>

輸出

George,John,Thomas
4
George,John,Thomas,James

unshift()方法

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

語法

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

參數(shù)

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

返回值

arrayObject 的新長度。

說明

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

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

提示和注釋

注釋：該方法會改變數(shù)組的長度。

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

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

實例

在本例中，我們將創(chuàng)建一個數(shù)組，并把一個元素添加到數(shù)組的開頭，并返回數(shù)組的新長度：

<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ù)組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數(shù)組。

語法

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

參數(shù)

• index 必需。整數(shù)，規(guī)定添加/刪除項目的位置，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
• howmany 必需。要刪除的項目數(shù)量。如果設(shè)置為 0，則不會刪除項目。
• item1, ..., itemX 可選。向數(shù)組添加的新項目。

返回值

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

說明

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

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

提示和注釋

請注意，splice() 方法與 slice() 方法的作用是不同的，splice() 方法會直接對數(shù)組進行修改。

實例

例子 1

在本例中，我們將創(chuàng)建一個新數(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

例子 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

總結(jié)

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

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