JavaScript中的array.fill()

在JavaScript中，我们经常需要对数组进行操作。其中，填充数组是一个常见的任务。为了解决这个问题，ES6的array.fill()方法应运而生。

array.fill()方法

array.fill() 方法用指定的值填充数组，从起始索引到终止索引。终止索引不包含在内。如果不指定终止索引，则填充整个数组。

const arr = [1, 2, 3, 4, 5];
// 用 0 填充整个数组
arr.fill(0);
// -> [0, 0, 0, 0, 0]

// 用 9 填充从索引 1 到 3 的位置
arr.fill(9, 1, 3);
// -> [0, 9, 9, 0, 0]

array.fill()的使用场景

填充数组

fill()方法主要用于填充数组。比如我们可以用 fill() 方法来创建一个固定长度的数组，然后将每个位置填充为同一个值。

const arr = new Array(5).fill(0);
// -> [0, 0, 0, 0, 0]

初始化数组

在使用某些库或框架时，我们需要初始化一个固定长度的数组。这时，我们可以使用fill()方法来创建一个指定长度的数组。

// 初始化一个长度为 n 的数组
const initArray = (n) => Array(n).fill(null);

清空数组

有时候我们需要将一个已有的数组清空，这时我们可以通过 fill 方法将其所有元素设为同一个值。

const arr = [1, 2, 3, 4, 5];
// 清空数组
arr.fill(null)
// -> [null, null, null, null, null]

数组交换、扩展和压缩

fill() 方法也可以用来进行数组的交换、扩展和压缩的操作。

// 数组交换
const arr1 = [1, 2, 3, 4, 5];
[arr1[0], arr1[4]] = [arr1[4], arr1[0]];
// -> [5, 2, 3, 4, 1]

// 数组扩展
const arr2 = [1, 2, 3];
arr2.fill(0, arr2.length, 5);
// -> [1, 2, 3, 0, 0]

// 数组压缩
const arr3 = [1, 2, 3, 4, 5];
arr3.fill(0, 2);
// -> [1, 2, 0, 0, 0]

注意事项

• fill() 方法会改变原数组，如果需要保留原数组，可以先将原数组复制一份再进行填充操作。
• fill() 方法返回的是原数组的引用，而不是一个新的数组。当数组是一个基础类型值（如字符串或数字）时，这可能会导致问题。造成数组深拷贝的方法可以使用 slice(), 其中 slice(0)返回原数组的副本。

结论

array.fill() 方法是 JavaScript 中一个非常有用的方法，它可以帮助我们轻松地操作数组。当我们需要对一个数组进行填充、初始化、清空、交换、扩展或压缩时，都可以使用 fill() 方法来完成。