在 ES7 中，新增了一个非常方便的方法：Array.prototype.fill()。这个方法可以让我们轻松地填充一个数组，让数组中的每个元素都变成指定的值。本文将详细介绍这个方法的使用方法和一些使用技巧。
基本用法
Array.prototype.fill() 方法接受两个参数。第一个参数是填充的值，第二个参数是填充的起始位置和结束位置。如果省略第二个参数，则默认从数组的第一个元素开始填充到最后一个元素。
以下是填充数组的基本用法：
const arr = [1, 2, 3, 4, 5]; arr.fill(0); // [0, 0, 0, 0, 0]
上面的代码将数组中的每个元素都填充成 0。
我们还可以指定填充的起始位置和结束位置：
const arr = [1, 2, 3, 4, 5]; arr.fill(0, 2, 4); // [1, 2, 0, 0, 5]
上面的代码将数组中从索引 2 开始到索引 4 结束的元素都填充成 0。
填充对象
除了填充基本类型的值，我们还可以填充对象。这时候我们需要注意的是，填充的是对象的引用，而不是对象本身。也就是说，如果我们填充了两个元素为同一个对象的数组，那么这两个元素其实是指向同一个对象的。
const obj = { name: 'Tom' };
const arr = new Array(3).fill(obj);
arr[0].name = 'Jerry';
console.log(arr); // [{ name: 'Jerry' }, { name: 'Jerry' }, { name: 'Jerry' }]上面的代码中，我们填充了一个长度为 3 的数组，每个元素都是同一个对象 obj。然后我们修改了数组中第一个元素的 name 属性，发现所有元素的 name 属性都发生了改变。这是因为这些元素其实都是指向同一个对象的。
使用技巧
填充数组的索引
有时候我们需要填充数组的索引，可以使用 Array.from() 方法结合 fill() 方法来实现：
const arr = Array.from({ length: 5 }, (v, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]上面的代码中，我们使用 Array.from() 方法创建了一个长度为 5 的数组，然后使用 fill() 方法填充了数组的索引。
填充多维数组
有时候我们需要填充多维数组，可以使用递归和 fill() 方法来实现：
-- -------------------- ---- -------
-------- ------------------------------ ------ -
--- ---- - - -- - - ----------- ---- -
-- ----------------------- -
--------------------------------- -------
- ---- -
------ - ------
-
-
-
----- --- - ---- --- --- --- -----
------------------------------ ---
----------------- -- ---- --- --- --- ----上面的代码中，我们定义了一个 fillMultiDimensionalArray() 函数来填充多维数组。如果元素是数组，则递归调用 fillMultiDimensionalArray() 函数，否则填充元素的值。
总结
Array.prototype.fill() 方法是一个非常方便的方法，可以让我们快速地填充数组。除了基本用法外，我们还可以填充对象、填充数组的索引、填充多维数组等。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65786435d2f5e1655d24d761