在 JavaScript 中创建数组是一项基本任务，但即使是经验丰富的开发人员也可能会忽略一些细微差别和陷阱。让我们深入了解基础知识，并探索数组创建和操作的一些有趣的方面，您可能会发现它们具有启发性。

基本数组创建

创建数组的最简单方法是使用数组文字：

let arr = [];

然后您可以使用循环填充此数组：

for (let i = 0; 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'}]




每个元素引用同一个对象。为了避免这种情况，请使用 map:


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 细节的内容。感谢您的阅读，祝您编码愉快！