卡卡網

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

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

什么是 JavaScript 中的數組？

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

這些值可以是字符串：

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

或者它們可以是對象：

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

值也可以是任何數據類型，包括數字、布爾值，甚至是另一個數組。

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

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

let reversedPeople = people.reverse()

console.log(reversedPeople)

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

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

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

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

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

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

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

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

const lastPerson = people.pop()

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

當pop()在people數組上調用時，數組中的最后一個值被刪除并分配給lastPerson，原始數組 ( people) 也發(fā)生了變異。

pop()方法

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

語法

arrayObject.pop()

返回值

arrayObject 的最后一個元素。

說明

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

實例

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

<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() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。

語法

arrayObject.shift()

返回值

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

說明

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

提示和注釋

注釋：該方法會改變數組的長度。

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

實例

在本例中，我們將創(chuà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() 方法可向數組的末尾添加一個或多個元素，并返回新的長度。

語法

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

參數

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

返回值

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

說明

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

提示和注釋

注釋：該方法會改變數組的長度。

實例

在本例中，我們將創(chuà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() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。

語法

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

參數

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

返回值

arrayObject 的新長度。

說明

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

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

提示和注釋

注釋：該方法會改變數組的長度。

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

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

實例

在本例中，我們將創(chuà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() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數組。

語法

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

參數

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

返回值

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

說明

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

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

提示和注釋

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

實例

例子 1

在本例中，我們將創(chuàng)建一個新數組，并向其添加一個元素：

<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

總結

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

標簽: 數組  Array