玩转 ES7 中新增的 Array.prototype.fill() 方法

阅读时长 4 分钟读完

在 ES7 中,新增加了一个数组方法 fill(),它可以将数组中指定的一段值全部替换成相同的值,从而方便地初始化数组。这个方法十分有用,尤其在处理数组时大可不用再写循环语句。

fill() 方法的语法

fill() 方法接受两个参数:要填充到数组中的值和一个可选的起始索引位置。起始索引参数不指定时,默认为0,即从数组头开始填充。

下面是一些示例用法。

使用 fill() 方法初始化数组

为了更好地理解 fill() 方法,考虑用一个例子来说明如何用 fill() 方法初始化数组。假设要创建一个长度为5的数组,然后将其中所有位置都初始化为0。这可以通过以下代码实现:

这里我们创建了一个长度为5的数组并填充初始值为0。可以看到, fill() 方法在将每个元素填充为0后返回了一个新数组。

替换数组中的特定值

除了初始化数组,您还可以使用 fill() 方法来替换数组中的特定值。例如,假设我们有下面这个数组:

现在如果你想把数组中的所有数替换成数字5,可以这样做:

在这个例子中,我们使用 fill(5) 方法来替换原始数组中的所有元素为数字5。 然后,我们打印出了数组的新值。可以看到,我们通过 fill() 方法成功地将数组中的所有元素替换成了数字5。

替换数组中的一部分元素

如果您只想替换数组中的一部分元素,而不是整个数组,可以使用两个参数的形式:

在这个例子中,我们使用 fill(0, 2, 4) 方法来将数组中索引位置为2和3的元素替换为数字0。因为索引2是我们填充的开始位置,而索引4是我们填充的结束位置,所有从索引2 ~ 4的位置都被填充为数字0。

用 fill() 方法替换 undefined 值

这个方法还有一个十分实用的用途,那就是为数组填充未定义的位置。假设我们有一个数组,未初始化的位置都是 undefined,那如果我们想让 undefined 变成0呢?可以用 fill() 轻而易举地实现这个操作:

在这个例子中,我们使用 fill() 方法将数组中第一个 undefined 替换为0。我们使用 arr.indexOf(undefined) 找到这个位置,然后使用 fill(0) 方法将其替换为数字0。现在我们看到 undefined 的位置变为了0,而其他位置都不变。

总结

通过使用 fill() 方法,你可以轻松地初始化一个数组、替换数组中的元素以及为数组中未定义的位置赋值。这个方法的语法非常简单易懂,无论你是否有经验都可以很容易地掌握这个方法。在未来书写 JavaScript 代码时,一定要尝试使用ES7 中新增的方法,以便更快地完成任务!

完整的代码示例如下:

-- -------------------- ---- -------
-- -----
----- --- - --- ----------------- -- --- -- -- -- --
    
-- ----------
--- ---- - --- -- ---
------------- -- --- -- --
    
-- ----------
--- ---- - --- -- -- -- ---
------------ -- --- -- --- -- -- -- --
    
-- ----- --------- --
--- ---- - --- ---------- -- ---------- ---
------------ ------------------------- -- --- -- -- ---------- --

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6596203aeb4cecbf2da01d42

纠错
反馈