JavaScript 稀疏陣列之謎 – 為什麼索引0到9消失了?

起因

前段時間在寫著 LeetCode #509 Fibonacci Number Solution & Explanation – Zyrastory 這一篇的時候

寫到了一段 JavaScript

var fib = function(n) {
    arr = [0,1];
    
    for(let i = 2; i<=n; i++)
    {
        arr[i] = arr[i-1]+arr[i-2];
    }
    return arr[n];
};

⭐前情提要 : C# 跟 Java 的array長度最開始就被定義了，無法隨意更改。但 JavaScript 是動態變動的

這題方法主要就是改寫C# 跟 Java 的function，但我寫著寫著總覺得哪裡有點奇怪

既然array是動態的， 那我在賦值 arr[i] = x 時，如果把 i 故意不下在下一個呢，陣列會變成如何呢?

邪惡的種子一旦生根了，就勢必得馬上實行 !!!

於是我立刻打開 F12，輸入了以下這一段

arr = []
arr[10] = 10

arr.forEach(function(item,index) {
  console.log("索引"+index+": "+item);
})
console.log("陣列總長度 : "+arr.length)

可以看到最早指定了一個空陣列 arr ，然後指定索引10 為 10

那問題來了，現在陣列長怎樣呢?? 大家這裡可以猜猜看

⭐這裡用到 foreach語法，順便偷渡下相關的文章 : JavaScript 奇怪的坑 – forEach 跳出循環 – return 居然失效了!? – Zyrastory

準備好了嗎? ⬇這裡揭曉謎底⬇

什麼!!

怎麼只有印出一個物件啊

但要說長度是 1 也不對啊，都明晃晃的告訴你總長度是 11 了

這時候我們只好用 arr[0] 來看看了 ➡ 是 undefined

這時候從索引從 0 到 9 印出來看看 ➡ 毫不意外，全部都是 undefined

這時候就來到我們今天的主題了

稀疏陣列 Sparse Array

定義簡單來說，就是陣列的長度跟其元素數量不相等

就像一排房子一樣，稀疏陣列就是有幾間房子裡面根本就沒有人

而與其對應的則是我們平常用的 密集陣列（Dense Array），也就是每個索引都有元素的狀況

該如何列印

JavaScript 中，forEach 方法僅會迭代已被賦值的索引，而不會迭代稀疏陣列中未被賦值的索引。

那其實改用最原始的 for 迴圈就可以了，不是對arr本身進行判斷，而是直接用變數強制造訪

arr = []
arr[10] = 10

for(let i = 0; i<arr.length;i++)
{
    console.log("索引"+i+": "+arr[i])
}
console.log("陣列總長度 : "+arr.length)

這樣就能得到我們想要看到的整個陣列了!

結論

相當有趣的經驗，看到索引 0到9 消失還是挺讓人感到困惑的

所以就有了這篇文章，雖然不知道對之後有沒有幫助哈哈!

好像該寫點跟C# Java的比較，但讓我先緩緩…

參考文章 :

• javascript稀疏陣列(sparse array)和密集陣列用法分析 – IT閱讀 (itread01.com)
• JS 陣列 Array 有哪幾種？ – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• 偉大的ChatGPT (雖然他有時候笨笨的…)
• 萬能的Google
• ❌這次沒有印度人的Youtube

🧡如果這篇文章有幫上你的一點點忙，那是我的榮幸

🧡幫我點一個小小的廣告或留言，可以讓我開心一整天

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !