JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

理解 JavaScript 中的數組

本文最初是為 DigitalOcean 編寫的 .

簡介

數組 在 JavaScript 中是一種用於存儲數據的全局對象。數組由包含零個或多個數據類型的有序集合或列表組成,並使用從 0 開始的編號索引 訪問特定項目。

數組非常有用,因為它們將多個值存儲在一個變量中,這可以壓縮和組織我們的代碼,使其更具可讀性和可維護性。數組可以包含任何數據類型,包括數字、字符串和對象。

為了演示數組的用途,請考慮將世界上的五大洋分配給它們自己的變量。

// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'

這種方法非常冗長,並且很快就會變得難以維護和跟踪。使用數組,我們可以簡化我們的數據。

// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']

我們現在有一個包含所有五個元素的變量,而不是創建五個單獨的變量。我們使用方括號 ([] ) 來創建一個數組。

訪問特定項目就像將索引附加到變量一樣簡單。

// Print out the first item of the oceans array
oceans[0]
Pacific

在本文中,我們將學習如何創建數組,如何索引它們,如何添加、修改、刪除或訪問數組中的項目,以及如何遍歷數組。

創建數組

在 JavaScript 中有兩種創建數組的方法。使用方括號的數組字面量和使用 new 的數組構造函數 關鍵字。

讓我們演示如何使用數組構造函數創建鯊魚物種數組,該數組構造函數使用 new Array() 進行初始化 .

// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')

現在這裡是用數組字面量創建的相同數據,用 [] 初始化 .

// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']

兩種方法都將創建一個數組。然而,數組字面量(方括號)方法更為常見和首選,如 new Array() 構造方法可能有不一致和意想不到的結果。了解數組構造函數很有用,以防萬一遇到它。

我們可以打印出一個完整的數組,它會和我們的輸入顯示一樣。

// Print out the entire sharks array
sharks
;['Hammerhead', 'Great White', 'Tiger']

數組通常用於將相似數據類型的列表組合在一起,但從技術上講,它們可以包含任何值或混合值,包括其他數組。

// Initialize array of mixed datatypes
let mixedData = ['String', null, 7, ['another', 'array']]

創建數組後,我們可以通過多種方式操作它們,但首先我們必須了解數組是如何索引的。

索引數組

如果你學習過 JavaScript 中的索引和操作字符串,你可能已經熟悉索引數組的概念,因為字符串類似於數組。

數組沒有名稱/值對。相反,它們使用以 0 開頭的整數值進行索引 .這是一個示例數組,分配給 seaCreatures .

let seaCreatures = ['octopus', 'squid', 'shark', 'sea horse', 'starfish']

以下是 seaCreatures 中每個項目的細分 數組被索引。

章魚 魷魚 鯊魚 海馬 海星
0 1 2 3 4

數組中的第一項是 octopus , 索引在 0 .最後一項是starfish , 索引在 4 .從 0 開始計數 在索引中,這違背了我們從一開始計數的自然直覺,因此必須特別注意記住這一點,直到它變得自然為止。

我們可以使用 length 找出數組中有多少項 屬性。

seaCreatures.length
5

雖然 seaCreatures 的索引 由 0 組成 到 4 , length 屬性將輸出數組中的實際項數,從一個開始。

如果我們想找出數組中某個特定項的索引號,比如sea horse ,我們可以使用 indexOf() 方法。

seaCreatures.indexOf('sea horse')
3

如果沒有找到索引號,例如對於不存在的值,控制台將返回 -1 .

訪問數組中的項目

通過引用方括號中的項的索引號來訪問 JavaScript 數組中的項。

seaCreatures[1]
squid

我們知道 0 將始終輸出數組中的第一項。我們還可以通過對 length 執行操作來找到數組中的最後一項 屬性並將其應用為新的索引號。

const lastIndex = seaCreatures.length - 1

seaCreatures[lastIndex]
starfish

嘗試訪問不存在的項目將返回 undefined .

seaCreatures[10]
undefined

為了訪問嵌套數組中的項目,您需要添加另一個索引號來對應內部數組。

let nestedArray = [
  ['salmon', 'halibut'],
  ['coral', 'reef'],
]

nestedArray[1][0]
coral

在上面的例子中,我們訪問了位置 1 的數組 nestedArray 變量,然後是位置 0 處的項目 在內部數組中。

向數組添加項

在我們的 seaCreatures 變量我們有五個項目,其中包括來自 0 的索引 到 4 .如果我們想向數組中添加一個新項,我們可以為下一個索引分配一個值。

seaCreatures[5] = 'whale'

seaCreatures
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale' ]

如果我們添加了一個項目並且不小心跳過了一個索引,它會在數組中創建一個未定義的項目。

seaCreatures[7] = 'pufferfish'

seaCreatures
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish' ]

嘗試訪問額外的數組項將返回 undefined .

seaCreatures[6]
undefined

使用 push() 可以避免此類問題 方法,將一個項目添加到數組的末尾。

// Append lobster to the end of the seaCreatures array
seaCreatures.push('lobster')

seaCreatures
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]

另一方面,unshift() 方法會將一個項目添加到數組的開頭。

// Append otter to the beginning of the seaCreatures array
seaCreatures.unshift('otter')

seaCreatures
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]

push() 之間 和 unshift() 您將能夠將項目附加到數組的開頭和結尾。

從數組中刪除項

當我們想從數組中刪除一個特定的項目時,我們使用 splice() 方法。在 seaCreatures 數組,我們之前不小心創建了一個未定義的數組項,所以現在讓我們刪除它。

seaCreatures.splice(6, 1)

seaCreatures
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]

splice() 方法,第一個參數代表要刪除的索引號,第二個參數是要刪除多少項。我們把 1 ,表示只會刪除一項。

splice() 方法將更改原始變量。如果您希望原始變量保持不變,請使用 slice() 並將結果分配給一個新變量。

let newArray = slice(6, 1)

pop() 方法將刪除數組中的最後一項。

// Remove the last item from the seaCreatures array
seaCreatures.pop()

seaCreatures
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]

lobster 已作為數組的最後一項被刪除。為了刪除數組的第一項,我們將使用 shift() 方法。

// Remove the first item from the seaCreatures array
seaCreatures.shift()

seaCreatures
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]

使用 pop()shift() ,我們可以從數組的開頭和結尾刪除項目。使用 pop() 盡可能首選,因為數組中的其餘項目保留相同的索引號。

修改數組中的項目

我們可以通過使用賦值運算符分配一個新值來覆蓋數組中的任何值,就像我們使用常規變量一樣。

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = 'manatee'

seaCreatures
[ 'manatee',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]

另一種修改值的方法是使用 splice() 帶有新參數的方法。如果我們想改變 sea horse 的值 ,即索引 3 處的項目 ,我們可以刪除它並在其位置添加一個新項目。

// Replace sea horse with sea lion using splice method
seaCreatures.splice(3, 1, 'sea lion')

seaCreatures()
[ 'manatee',
	'squid',
	'shark',
	'sea lion',
	'starfish',
	'whale',
	'pufferfish' ]

在上面的例子中,我們刪除了 sea horse 從數組中,並將新值推送到索引 3 .

遍歷數組

我們可以使用 for 遍歷整個數組 關鍵字,利用 length 財產。在這個例子中,我們可以創建一個 shellfish 的數組 並將每個索引號以及每個值打印到控制台。

// Create an array of shellfish species
let shellfish = ['oyster', 'shrimp', 'clam', 'mussel']

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i])
}
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

我們也可以使用 for...of 循環,JavaScript 的一個新特性。

// Create an array of aquatic mammals
let mammals = ['dolphin', 'whale', 'otter']

// Loop through each mammal
for (let mammal of mammals) {
  console.log(mammal)
}
dolphin
whale
otter

for...of loop 不會檢索數組中元素的索引號,但它通常是一種更簡單、更簡潔的遍歷數組的方式。使用循環對於打印出數組的整個值非常有用,例如在網站上顯示數據庫中的項目時。

結論

數組是 JavaScript 編程中極為通用的基本部分。在本文中,我們學習瞭如何創建數組、如何索引數組,以及在數組中工作的一些最常見的任務,例如創建、刪除和修改項目。我們還學習了兩種遍歷數組的方法,這是一種常用的顯示數據的方法。


Tutorial JavaScript 教程
  1. 如何在 Laravel 8 中打印和寫入數組值到文件

  2. 🎬隨機密碼生成器 | html CSS Javascript✨

  3. Vue Scoped Slots - 它們是 WTF,我該如何使用它們?

  4. 增加現場流量

  5. JS 異步:回調

  6. 構建那個組件樹!又名我訓練營的前端模塊

  7. 如何檢查給定字符串中出現的字母是否相同

  1. 如何使用 JS 編碼/解碼 base64

  2. 基本 JavaScript:數據類型

  3. 讓有眼睛👁 殘疾的人可以訪問您的網站

  4. CSS 歡迎動畫溢出

  5. JavaScript 挑戰 3:刪除零

  6. 查找與給定輸入關聯的 html 標籤

  7. 如何始終在屏幕底部顯示浮動操作按鈕

  1. 🔥🕺🏼 JavaScript 可視化:吊裝

  2. 什麼是 Webpack?簡單來說。

  3. WebRTC 初學者 - 第 4 部分:屏幕共享

  4. 使用 Node.js 應用發送短信