在前端开发中，我们经常需要操作数组，其中替换数组元素是一项常见的任务。在 ES7 中，新增的 Array.prototype.fill 方法可以帮助我们快速地替换某个区间内的数组元素。
Array.prototype.fill 方法
Array.prototype.fill 方法可以将数组中一段区间内的元素都替换为同一个值。它的语法如下：
array.fill(value[, start[, end]])
其中：
value：需要填充的值。start：填充的起始位置（默认为 0）。end：填充的结束位置（默认为数组的长度）。
用法示例
下面我们来看一个使用 Array.prototype.fill 方法的例子：
const arr = ["a", "b", "c", "d", "e"];
arr.fill("x", 1, 4); // ["a", "x", "x", "x", "e"]上面的代码中，我们将数组 arr 中从索引为 1 的元素（包含）到索引为 4 的元素（不包含）的区间都替换成了字符串 "x"。最终得到的数组为 ["a", "x", "x", "x", "e"]。
实际应用
我们可以将 Array.prototype.fill 方法应用到实际开发中，以方便地完成一些操作。例如，我们有一个展示纯文本的文本框，需要将其中的特定区间替换为其他格式的文本，可以使用以下代码实现：
const textbox = document.getElementById("textbox");
const content = textbox.value;
const start = 10; // 起始位置
const end = 20; // 结束位置
const format = "<strong>" + content.substring(start, end) + "</strong>";
const newContent = content.substring(0, start) + format + content.substring(end);
textbox.value = newContent;上面的代码首先获取了文本框中的内容，并指定了需要替换的起始位置和结束位置。然后，它创建了一个新的格式化文本字符串，将这个字符串和原内容中的其他部分拼接起来，最终将新的内容赋值给文本框。
我们也可以使用 Array.prototype.fill 方法来完成同样的操作。代码如下：
const textbox = document.getElementById("textbox");
const content = textbox.value.split("");
const start = 10; // 起始位置
const end = 20; // 结束位置
const format = ["<strong>", ...content.slice(start, end), "</strong>"];
content.fill("", start, end);
content.splice(start, format.length, ...format);
textbox.value = content.join("");这种方法与上述方法相似，但使用 Array.prototype.fill 方法来替换需要格式化的部分的元素，然后再使用数组的 splice 方法将格式化后的元素插入到数组中。最后，将数组转换成字符串并将其赋值给文本框。
总结
在本文中，我们介绍了 ES7 中的 Array.prototype.fill 方法，它可以帮助我们快速地替换某个区间内的数组元素。我们还给出了一些使用示例，以及实际应用中的代码示例。我们希望这篇文章对您有所帮助，能够提高您的编程效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659011fbeb4cecbf2d59607d