在 JavaScript 中用范围填充数组

1. 使用 JavaScript 中的 Array.fill() 函数用范围填充数组
2. 使用 JavaScript 中的 Array.from() 函数用范围填充数组
3. 在 JavaScript 中使用 ES6 扩展运算符用范围填充数组
4. 使用 JavaScript 中的 Array.map() 函数用范围填充数组
5. 在 JavaScript 中使用范围填充数组的更多方法

本文将讨论 Array 类提供的各种方法，我们可以使用这些方法在 JavaScript 中用范围填充数组。

使用 JavaScript 中的 Array.fill() 函数用范围填充数组

Array.fill() 方法用特定值填充现有数组。

该方法采用三个参数：value，我们将填充到数组中，以及 start 和 end，它们描述了我们要在数组中添加数据的位置。start 和 end 是可选参数。

例子：

var arr = [1, 2, 3, 4];
arry.fill(6);

console.log(arr);

输出：

[6, 6, 6, 6]

正如我们所看到的，数组中的所有元素都被成功替换并填充了值 6。如果我们不想用该值替换所有元素，我们可以指定 start 和 end 索引。

使用 JavaScript 中的 Array.from() 函数用范围填充数组

在 ES6 版本的 JavaScript 中引入的 Array.from 方法从类似数组的可迭代对象创建数组的浅拷贝实例。

语法：

Array.from(target, mapFunction, thisValue)

其中，

1. target：要转换为数组的对象。
2. mapFunction：调用每个数组元素。这是一个可选参数。
3. thisValue：执行 mapFunction 时用作 this 的值。这也是一个可选参数。

为了填充数组，我们使用 Array.from() 和 Array.keys()。Array.keys() 方法提取数组的所有键并返回一个迭代器，然后 Array.from() 函数将此迭代器作为参数。

最后，所有索引都被复制为新数组的元素。

例子：

var arr = Array.from(Array(5).keys());
console.log(arr);

输出：

[ 0, 1, 2, 3, 4 ]

在 JavaScript 中使用 ES6 扩展运算符用范围填充数组

除了 Array.from() 函数，我们还可以使用扩展运算符，由三个点 ... 表示。

我们将传递 Array.keys()，它将返回一个迭代器，并使用扩展运算符 ... 扩展该迭代器中存在的元素，放在 Array.keys() 之前。

之后，我们必须将所有这些括在方括号 [] 内以表示一个数组。

扩展运算符将生成与 Array.from 函数相同的输出。

例子：

var arr = [...Array(5).keys()];
console.log(arr);

输出：

[ 0, 1, 2, 3, 4 ]

使用 JavaScript 中的 Array.map() 函数用范围填充数组

Array.map() 函数将通过在调用数组的每个元素上运行提供的函数作为参数来创建一个新数组。这可以将任何函数作为参数，例如箭头、回调或内联。

例子：

var elements = 5;
var arr = [...Array(elements)].map((item, index) => index);
console.log(arr);

输出：

[ 0, 1, 2, 3, 4 ]

在上面的例子中，map 函数将箭头函数作为参数来提取 item 和 index。将在数组的每个元素上调用此箭头函数。

最后，所有数组元素的索引值将被提取并存储在新数组中。

在 JavaScript 中使用范围填充数组的更多方法

我们讨论过的在 JavaScript 中用范围填充数组的方法被许多开发人员广泛使用。除了这些，我们还可以使用其他方法。

1. Array.prototype.apply()，它是 JavaScript 中的预构建方法。
2. Underscore.js 库的 range() 方法。