js fill()(JavaScript使用fill函数实现数组填充)

什么是fill()

fill()是JavaScript数组的一个函数，它可以让我们将指定值填充到数组中的每个元素中。这个函数可以大大简化我们对数组的操作，特别是在需要将数组每个元素都赋上相同的值的时候。

fill()的语法

fill()函数有两个参数，第一个参数是要填充的值，第二个参数是起始索引。第二个参数是可选的，如果省略，则默认从索引0开始填充，一直到数组的结尾。

arr.fill(value[, start[, end]])

fill()的应用场景

fill()函数通常应用于一些需要初始化数组的场景，例如我们需要用同样的值设置数组的初始值，可以使用fill()函数完成这个操作。

例如，如果我们要初始化一个长度为10的数组，将每个元素都设置为0，那么可以使用这个代码片段：

const arr = new Array(10).fill(0);
console.log(arr);
//[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

fill()的案例

下面我们来看一个完整的案例。我们想要创建一个数组，代表星期一到星期五的每天上班时间。由于每天的上班时间都是相同的，我们可以使用fill()函数来简便地填充这个数组，如下所示：

const workDays = new Array(5).fill('9:00am - 6:00pm');
console.log(workDays);
//["9:00am - 6:00pm", "9:00am - 6:00pm", "9:00am - 6:00pm", "9:00am - 6:00pm", "9:00am - 6:00pm"]

我们创建了一个长度为5的新数组，并使用fill()函数将每个元素都设置为 '9:00am - 6:00pm'。这样我们就成功地创建了一个代表每个工作日上班时间的数组。

使用fill()改变部分数组元素的值

除了初始化数组之外，使用fill()函数还可以在不创建新数组的情况下，更改已存在的数组的一部分元素的值。

下面是一个将数组中特定元素替换为新值的例子：

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 2, 4);
console.log(arr);
// [1, 2, 0, 0, 5]

在上面的代码中，我们将第3到第4个元素（不包括第4个元素）的值都设置为0。注意，start参数是包含在操作中的，但是end参数是不包含在操作中的。因此，上述代码中的arr.fill(0, 2, 4)，其实是将3和4两个元素的值都设置为了0。

用fill()实现范围随机

我们还可以使用fill()函数实现一些随机值的生成，例如创建一个长度为10的数组，其中每个元素都是1到10的随机整数。

const arr = new Array(10).fill(0).map(() => Math.floor(Math.random() * 10) + 1);
console.log(arr);

在该代码中，我们首先使用fill()函数创建一个长度为10，元素都为0的数组。然后，我们使用map()函数对每个元素都生成一个随机值。这里的Math.floor()和Math.random()函数用于生成1到10之间的随机整数。最终，我们获得了一个长度为10的数组，其中每个元素都是1到10之间的随机整数。

总结

fill()函数是JavaScript数组中非常有用的一个函数。它可以为新数组的初始化提供很大的帮助，同时也可以帮助我们轻松地更改已存在的数组的部分元素的值。fill()函数有很多应用场景，包括范围随机生成和数组初始化等等。使用fill()函数不仅可以帮助我们减少代码的冗余，还能让我们少些很多重复的代码，提高我们的编程效率。