javascript 列表

| | | | | | | | | | | | | | | | | | | | | | | | | | |

我們將自己創建一個水果列表。我們將列表命名為“水果”,並添加以下值:香蕉、甜瓜、葡萄。哦,我多麼喜歡水果!雖然這聽起來像是購物清單教程,但實際上我們只是創建了一個表格。

在本指南中,我們將討論什麼是數組,它們是如何工作的,以及為什麼應該在代碼中使用它們。我們將討論一些實際的示例板,以便您成為 JavaScript 板忍者!

什麼是數組?

數組是存儲數據的對象。數組包含有序的元素集合,可以存儲零個或多個元素。數組在編程中很有用,因為它們允許您可以將相似的值存儲在一個變量中。

例如,您不必編寫十個簡單的變量來列出您最喜歡的水果。使用數組,您可以將所有喜歡的水果添加到一個變量。

考慮下面的例子:

這裡我們創建了一個名為“fruits”的數組。它存儲了三個不同的值,每個值都反映了我們想在雜貨店購買的水果。為了聲明我們的數組,我們將元素列表括在方括號中。

聲明數組

聲明數組有兩種方法。您會看到大多數人這樣做的方式是在方括號中圈出一個項目列表,就像我們之前所做的那樣:

在這個例子中,我們聲明了一個包含三個值的數組。我們也可以使用數組構造函數,它使用 new 關鍵字來聲明一個數組:

這些代碼片段創建相同的數組,但使用不同的方法。請注意,在我們的第二個示例中,我們使用循環支持來聲明我們的數組。我們還使用 new Array 構造函數來聲明一個數組。正因為如此,大多數人更喜歡第一種方法;方括號更容易記住並且輸入速度更快

表格可能不包含相同的數據類型 我們的網絡可以存儲許多不同的數據類型。

此數組存儲三種不同的數據類型:字符串、數字和布爾值 現在您已經熟悉瞭如何聲明數組,現在可以訪問它們的內容了。

讀取數組

如果我們不能讀取它們,數組就不會很有用。值。這就是索引存在的原因。索引是訪問單個元素的一種方式將可迭代對像作為列表。

數組中的每個元素都分配有其索引 numb er.這些數字以 0 開頭,可用於將電流交替到數組中的各個元素。還記得我們的“水果”表嗎?

這裡是分配給這個數組的索引值,Äã,Äã:

使用這些數字我們可以訪問列表中的不同項目。假設您要識別水果位於數組中的索引位置 1。您可以這樣做,在表名後的括號中指示索引值:

我們的代碼返回。葡萄 我們指的是索引的位置 1,它存儲了值“Raisin”。如果您傳遞值 0,將返回“香蕉”。如果您嘗試訪問不存在的元素,將返回“未定義”:

輸出:未定義。當您想要遍歷數組中的元素時,索引特別有用。假設您想在控制台上打印模具中的每個水果。您可以使用這樣的循環來執行此操作:

這段代碼返回:

我們的代碼遍歷列表中的每個項目,然後將每個項目打印到控制台。您還會注意到我們使用了長度 。這個函數返回我們列表的長度

將元素添加到數組中

大多數 pa ,有時您想在最初聲明數組後向數組添加新值。您可以使用 push () 數組來實現。

我們忘記在我們的水果列表中添加“草莓”了。哦不!別擔心,我們總是可以使用 push()

現在我們已經運行了這段代碼,我們的數組看起來像這樣:

< table class = "wp-block table cours-info table"> 香蕉 葡萄 甜瓜 草莓 1 2 3

您可以使用代碼< > unshift() 將數據添加到表的開頭。草莓在我們的購物清單中非常重要,我們希望它們首先出現:

這將使我們的“水果”列表看起來像這樣:

< td>草莓
香蕉葡萄
1 2 3

從數組中移除元素

原來我們家裡已經有瓜了,所以沒必要買一個。買瓜有什麼意義,對吧?由於甜瓜位於列表的末尾,我們有兩個選項可以刪除它:

使用Let splice() 為例:.

我們的代碼返回:

splice () 接受兩個參數。第一個是要從數組中刪除的索引號,第二個是要刪除的項目數。在這種情況下,我們想刪除索引值為 3 的元素,因此我們指定“3, 1”作為參數。

pop () 不接受任何參數.僅刪除列表中的最後一項:

我們的代碼返回:

你也可以使用 shift() 從列表的開頭移除一個元素:

我們的代碼返回:

push ()unshift () 將項目添加到列表中。 pop ()shift () 項從列表中移除。組裝方法還可以用於根據其索引值從列表中刪除一個項目

修改系列元素

雖然香蕉是一種很好吃的水果,但它們往往很大,當你感到有點緊張時,你不能把它當作零食吃。我敢餓。嬰兒香蕉更容易吃。

現在假設我們想改變我們的“水果”列表來購買嬰兒香蕉而不是普通香蕉。我們可以使用賦值運算符來做這件事,因為我們都是變量:

Our代碼返回:

我們修改了入口在索引位置 0 處存儲值“baby bananas”。不需要使用特殊方法進行此更改;賦值運算符用於修改 val使用數組。

結論

這是您需要了解的有關 JavaScript 數組的基礎知識。還有更多要學習的東西,但這就是讓編程變得有趣的原因:總是有一個新的挑戰需要解決。如果不出意外,你已經了解了我最喜歡的水果。雖然我會說我喜歡黑醋栗,但我在本教程中沒有提到它。

你現在已經準備好開始使用 JavaScript 數組,比如專家!