随着前端技术的快速发展，JavaScript 也在一直升级，ES7 也是我们常用的 JavaScript 版本之一。在 ES7 中，我们可以使用 Array.prototype.fill() 方法为数组元素添加默认值，这大大减少了我们处理数组时的代码量和工作复杂度。
什么是 Array.prototype.fill() 方法
Array.prototype.fill() 方法用于填充数组中的元素，使用指定的静态值替换原来的元素。该方法会改变原数组，不会创建副本。
该方法接受三个参数：
value：需要填充的静态值。start：开始填充的索引，默认为 0。end：结束填充的索引，默认为数组的长度。
fill() 方法的用法示例
const arr = new Array(5);
arr.fill(0); // [0, 0, 0, 0, 0]
const arr2 = [1, 2, 3, 4, 5];
arr2.fill('*', 1, 3); // [1, '*', '*', 4, 5]上面的示例展示了 fill() 方法的使用，每个示例都返回了一个新数组。
使用 fill() 方法为数组元素添加默认值
在处理数组时，我们经常需要给数组中的元素设置默认值。在 ES5 及之前的 JavaScript 版本中，我们通常使用 for 循环来遍历数组，并为每个元素设置一个默认值。但是这种方式需要编写大量重复的代码，而且代码结构单一，不够简洁高效。
在 ES6 及之后版本中，我们可以使用数组的 map() 方法来设置默认值。如下所示：
const arr = new Array(5).fill('*');
console.log(arr); // ['*', '*', '*', '*', '*']上面的示例代码展示了如何使用 fill() 方法为数组元素设置默认值，并且不需要使用循环或其他复杂的代码来实现。
常见的 fill() 方法使用场景
很多时候，在编写 JavaScript 代码时，我们需要处理数组，并为数组中的元素设置默认值。下面是一些常见的使用场景。
1. 为表格单元格设置默认值
在开发 Web 应用程序时，我们经常需要使用表格来展示数据。在表格中，我们会使用单元格来展示数据，并且需要为每个单元格设置默认值。使用 fill() 方法，我们可以非常轻松地实现这一功能。
const row = new Array(5).fill('*');
const table = new Array(3).fill(row);
console.table(table);上述代码中，我们定义了一个包含三行五列的表格，使用 fill() 方法为每个单元格设置了默认值。可以使用 console.table() 方法来查看表格的展示效果。
2. 创建指定长度的数组
在 JavaScript 中，数组是动态的，可以随时添加或移除元素。但是有时候我们需要创建一个指定长度的数组，用于保存一定数量的数据。使用 fill() 方法，我们可以方便地创建出指定长度的数组，并设置默认值。
const arr = new Array(10).fill(0); console.log(arr); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
上述代码中，我们创建了一个包含 10 个元素的数组，并为每个元素设置了默认值 0。
总结
在 ES7 中，我们可以使用 Array.prototype.fill() 方法为数组元素设置默认值。这是一个非常简单、高效且实用的方法，可以减少我们处理数组的代码量，并提高应用程序的性能。本文介绍了 fill() 方法的用法及常见使用场景，希望对大家学习和使用 fill() 方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a91d95add4f0e0ff26f71e