在 JavaScript 中建立陣列：綜合指南

在 JavaScript 中建立陣列是一項基本任務，但即使是經驗豐富的開發人員也可能會忽略一些細微差別和陷阱。讓我們深入了解基礎知識，探索數組創建和操作的一些有趣的方面，您可能會發現這些方面很有啟發性。

基本數組創建

建立陣列最簡單的方法是使用陣列文字：

let arr = [];

然後您可以使用循環填充此數組：

for (let i = 0; i < 5; i++) {
  arr.push(i);
}

這將建立一個包含元素 [0, 1, 2, 3, 4] 的陣列。但是，如果您建立空數組而不填滿它，您將獲得一個沒有項目且沒有空槽的陣列。

使用數組構造函數

建立陣列的另一種方法是使用陣列建構子：

let arr = Array(5);

當傳遞單一數字參數時，它會建立一個具有指定長度但沒有實際元素的稀疏數組：

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

稀疏數組

稀疏數組具有“空槽”，這可能會在使用諸如 map、filter 或 forEach 之類的方法時導致意外行為。這些方法會跳過空槽：

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

要填滿這樣的數組，您需要手動設定值：

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

處理稀疏數組

要有效處理稀疏數組，可以使用 fill 等方法初始化值：

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

但是在填滿物件或陣列時要小心：

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

每個元素引用同一個物件。為了避免這種情況，請使用地圖：

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Array.from 方法

Array.from 提供了一種從類似陣列或可迭代物件建立陣列的通用方法：

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

此方法在建立二維數組時也有幫助：

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

迭代數組

JavaScript 提供了多種迭代數組的方法，每種方法都以不同的方式處理稀疏數組：

• for 迴圈：處理每個索引，將空槽視為未定義。
• for...in：迭代數組的索引，跳過空槽。
• for...of：迭代值，將空槽視為未定義。

結論

了解 JavaScript 中陣列建立和操作的複雜性可以幫助您避免常見陷阱並編寫更有效率的程式碼。無論您使用的是陣列文字、陣列建構函數或 Array.from 和 fill 等方法，了解這些工具的工作原理都將使您能夠在專案中有效地處理陣列。

如果您發現本指南有幫助，請告訴我。我總是渴望創造更多深入研究 JavaScript 細節的內容。感謝您的閱讀，祝您編碼愉快！

以上是在 JavaScript 中建立陣列：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！