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。
記得，{}是object的宣告。
這裡為了方便閱讀換了行，但主要結構還是[]包著{}，也就是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。
打開Codepen的Console，可以看見'black'被印出來了！
因為’black’是bestColors的第0個，所以它被印出來！
存取array裡object的資料
要存取array資料可以用[]，要存取object資料可以用.，我們可以合併使用。
存取到array裡第一個object的title。
array內建的method
由於array其實是一種特別的object，我們也能透過.去存取property或是內建的method。
另外，神奇的是，在JS的世界裡幾乎所有內容都其實是種object，不管是string、function或是number。換句話說，我們都能透過.去存取內建的property或是method。
感謝前人的努力，有很多的method讓我們可以不用自己寫程式的情況下完成複雜的操作。
舉例來說，在宣告一個string後，如果我們想把一串字都變大寫，可以用string內建的method。
這個內建的method把字都變大寫了。
太方便了…
我們不用一個字一個字處理，像其他程式語言在做的那樣，只需要一個method。再一次，感謝前人的努力…
回到array！
Push
其中array的push()可以讓我們把新資料加在最後面。
可以看見我們的bestColors array最後多了新增的'white'。
Splice
splice()需要兩個參數，第一個是從哪開始刪除，第二個代表要刪除幾個。
如果我想從bestColors刪除’yellow’，那就是從編號2開始，刪除1個。
成功把位在編號2的'yellow'刪除了（編號是從0開始！）。
這裡只是做幾個簡單的示範。諸如此類的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, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。
你可能也想看
