Day04 JavaScript Array（陣列）

什麼是Array（陣列）

array跟object一樣是一種資料的容器，不同的是array通常用來裝同類別的資料，就像是書架用來收納書。要在書架裡放書跟其他東西也是可以的，但就是有點奇怪，不是大家習慣的做法。

array透過[]宣告。

假設我們要儲存使用者喜歡的顏色這筆資料，每筆資料的類型都是類似的，而且幾乎可以肯定不會只有一組。這時候就很適合用array。

觀察array可以看見它的架構:

let array = []

array的好處就是能夠井然有序的管理同類型的資料。

Array資料類型

JavaScript的世界可以說是處處不受限，array裡面想放什麼資料都是允許的。

雖然array內通常會放同類型的資料，但由於JS的自由性，如果某人很反社會的話，資料也可以混用，也就是array同時有string, number, boolean…

當然，強烈建議不要做這種傻事，除了有被合作夥伴殺掉的風險外，過幾個禮拜後的自己也會恨死自己。很容易忘記裡面到底擺了什麼，也很難瞭解規則。

Array內的Object

除了一般的資料型態外，array裡也可以放object。

假設我們有一筆使用者有關的資料，可以把資料整理成object再放進array。

這裡為了方便閱讀換了行，但主要結構還是[]包著{}，也就是array裡放object。

事實上，許多軟體資料都是由array跟object共同組成。Instagram的貼文是貼文array裡許多的object。大概是像這樣：

存取array資料

跟object不同，array裡沒有資料的標籤可以找資料（不像object的property），我們只能透過array內的編號來存取。是的，array裡放資料的順序可以讓我們定位資料，順序從0開始。

還記得之前提到過的console.log()嗎？它可以讓Console印出東西。這裡我們要用到了。

輸入完之後打開Console，可以按Codepen底下的Console按鈕。也可以直接cmd + option + i 或 f12 打開瀏覽器的Console。

因為’black’是bestColors的第0個，所以它被印出來！

存取array裡object的資料

要存取array資料可以用[]，要存取object資料可以用.，我們可以合併使用。

array內建的method

由於array其實是一種特別的object，我們也能透過.去存取property或是內建的method。

另外，神奇的是，在JS的世界裡幾乎所有內容都其實是種object，不管是string、function或是number。換句話說，我們都能透過.去存取內建的property或是method。

感謝前人的努力，有很多的method讓我們可以不用自己寫程式的情況下完成複雜的操作。

舉例來說，在宣告一個string後，如果我們想把一串字都變大寫，可以用string內建的method。

太方便了…

我們不用一個字一個字處理，像其他程式語言在做的那樣，只需要一個method。再一次，感謝前人的努力…

回到array！

Push

其中array的push()可以讓我們把新資料加在最後面。

Splice

splice()需要兩個參數，第一個是從哪開始刪除，第二個代表要刪除幾個。

如果我想從bestColors刪除’yellow’，那就是從編號2開始，刪除1個。

這裡只是做幾個簡單的示範。諸如此類的method還有很多，有無數個那麼多。我們只需要一步一步在需要用的時候了解、使用即可，不需要每個都熟記。重點是了解array的骨架，還有它的使用情境。

小結

程式語言最棒的就是自動化，當我們把資料放進array後，我們能夠用內建的method一次處理所以相似的資料。目前我們還沒講到這樣的method，不過可以先把這件事放在心上。

在這個單元，我們只需要知道：array跟object一樣，是一種資料的容器，通常用來儲存同樣資料型態的資料（像書架那樣）。而我們會透過[]來存取array的值，透過.使用array內建的method。

接下來，我們會討論JavaScript中的條件判斷。

Resource

今日Codepen

連結

Credits

• Learn JavaScript: Full-Stack from Scratch — Brad Schiff
• Web Programming — Rick Huang
• https://openprocessing.org/sketch/1561900/ — Chang Wen Han
• https://chartogne-taillet.com/fr — Bruno Simon
• https://www.apple.com/apple-vision-pro/ — Apple
• https://claude.ai — Anthropic

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

• Github
• Mail
• Website
• 請杯咖啡