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的比較,但讓我先緩緩…

參考文章 :

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *