🍄sparse array

JS ⟩ object ⟩ built-in ⟩ Array ⟩ sparse array

• array that has "holes" in it.

• "holes" are (usually) treated as undefined.

loops and array methods treat "holes" in sparse arrays differently.

• for-of：treats "holes" as undefined.

• forEach：ignores "holes".

• map ：preserves holes.

• filter ：ignores holes.

👉 how array methods deal with "holes" ?

⭐️ 重點

deleting an array element leaves a “hole” in the array and does not change the array’s length❗ (sparse array)

• if an array literal contains multiple commas in a row, with no value between, the array is sparse.

• array literal syntax allows an optional trailing comma, so [,,] has a length of 2, not 3❗

🔴 主題

• how array methods deal with "holes" ?

• iterating elements - for-of and forEach() treat "holes" differently.

👥 相關

• arr.filter() - remove "holes" in array.

• arr.removeValue()

• arr.removeUndefined()

• Array(n) vs. Array(n).fill()

💈範例

let arr = [];
arr[1] = 1;
arr[3] = 2;
// ⭐️ same as: [  , 1,  , 2 ]
//               ^     ^  <---- holes ⭐️ 

📗 參考

• Better Programming ⟩ What Are Holes in Arrays?

• JavaScript: The Definitive Guide ⟩

  • 7.1.1 Array Literals

  • 7.3 Sparse Arrays

📘 手冊

• Array.prototype method

Array(n) vs. Array(n).fill()

Array(3)

• 只會設定陣列長度 {length: 3}，並不會設定「整數索引」屬性

• 如果做 .map()，只會得到空陣列，因為 .map() 會保留「洞」。

Array(3).fill()

• 會填入 undefined，並設定「整數索引」屬性，這時使用 .map() 就會有實際效果。