JS创建指定长度数组|极客教程

JS创建指定长度数组

在JavaScript中，我们经常需要创建一个指定长度的数组来存储数据。有时候我们需要一个固定长度的数组来初始化数据结构，有时候我们需要将其作为一个数据集合来使用。

本文将介绍如何在JavaScript中创建一个指定长度的数组，并且讨论一些常见的用例和技巧。

使用Array构造函数创建指定长度数组

在JavaScript中，我们可以使用Array构造函数来创建一个指定长度的数组。只需要传入一个参数，即数组的长度即可。

const arr = new Array(5); // 创建一个长度为5的数组
console.log(arr); // [ <5 empty items> ]

在上面的代码中，我们通过new Array(5)创建了一个长度为5的数组，但是数组里面并没有任何元素。它只是一个包含5个空元素的数组。

为了访问数组中的元素，我们可以使用索引来操作：

arr[0] = 10;
arr[1] = 20;
console.log(arr); // [ 10, 20, <3 empty items> ]

console.log(arr.length); // 5

在上面的代码中，我们给数组的第一个元素和第二个元素赋了值，然后通过console.log(arr)可以看到数组的内容已经改变了，只有剩下的三个元素仍然是空的。

使用fill方法填充数组

如果我们希望创建一个指定长度的数组，并且填充这个数组的每个元素，我们可以使用fill方法来简化操作。

const arr = new Array(5).fill(0); // 创建一个长度为5的数组，并用0填充
console.log(arr); // [ 0, 0, 0, 0, 0 ]

我们还可以使用其他值来填充数组：

const arr = new Array(5).fill('hello'); // 创建一个长度为5的数组，并用'hello'填充
console.log(arr); // [ 'hello', 'hello', 'hello', 'hello', 'hello' ]

使用Array.from方法创建指定长度数组

除了使用Array构造函数，我们还可以使用Array.from方法来创建一个指定长度的数组。

const arr = Array.from({ length: 5 }); // 创建一个长度为5的数组
console.log(arr); // [ <5 empty items> ]

我们可以通过第二个参数，传入一个映射函数，来填充数组的元素：

const arr = Array.from({ length: 5 }, (value, index) => index * 2); // 创建一个长度为5的数组，并根据索引填充值
console.log(arr); // [ 0, 2, 4, 6, 8 ]

在上面的示例中，我们使用了一个箭头函数 (value, index) => index * 2，这个箭头函数接收两个参数，value代表当前元素的值（因为我们是通过{ length: 5 }来创建的数组，所以值是undefined），index代表当前元素的索引，然后我们通过index * 2的计算来填充数组的值。

使用fill和map方法创建指定长度数组

我们还可以结合使用fill和map方法来创建一个指定长度的数组。

const arr = new Array(5).fill().map(() => Math.random()); 
console.log(arr);

在上面的示例中，我们首先创建了一个长度为5的数组，然后调用fill方法填充了数组，fill方法不传入任何参数默认用undefined填充。接着我们调用map方法，在每个元素上调用一个函数来生成新的元素，这里用Math.random()来生成随机数填充数组。

使用Array构造函数和map方法创建指定长度数组

另一种方法是使用Array构造函数和map方法结合来创建指定长度数组。

const arr = new Array(5).map(() => Math.random());
console.log(arr); // [ <5 empty items> ]

在上面的示例中，我们通过new Array(5)创建了一个长度为5的数组，然后调用map方法，但是这样会发现map方法并不能正确生成数组的内容，因为new Array(5)只是创建了一个包含5个空元素的数组，并没有实际的元素值。

为了解决这个问题，我们可以在调用map方法之前，使用Array.from方法将这个空数组转换为一个包含undefined元素的数组：

const arr = Array.from(new Array(5)).map(() => Math.random());
console.log(arr); // [ 0.6612419751218478, 0.5744720749824036, 0.08525088562119888, 0.8389853163947034, 0.5246635378321215 ]

通过上述操作，我们可以得到一个包含5个随机数的数组。