js fill

在JavaScript中，fill 方法是数组对象(Array)的一部分，用于填充数组的元素。fill 方法最早在ECMAScript 2015 (ES6)中引入，它通过指定的值来填充数组的一个或多个元素，并根据需要修改原数组。fill 方法的语法相对简单，但它的应用场景相对多样化。在深入了解fill方法之前，首先让我们看看它的基本用法：

语法

arr.fill(value[, start[, end]])

• value: 用来填充数组元素的值。
• start: 可选参数，开始填充的位置索引，默认值为0。
• end: 可选参数，结束填充的位置索引，默认值为数组长度。

注意，fill 方法会改变原数组，并返回修改后的数组。

基本用法示例

1. 简单填充数组：

const arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

在此示例中，数组arr被用值0完全填充。

2. 指定填充起始位置：

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 2);
console.log(arr); // [1, 2, 0, 0, 0]

这里，从索引2开始，用0填充。

3. 指定填充起始和结束位置：

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4, 5]

在这一例子中，从索引1开始到索引3结束（不含3），用0填充。

fill 方法的应用场景

尽管fill方法看起来相对简单，但它在编程中有一些非常有用的应用场景：

1. 初始化一个固定值的数组：

假设你想初始化一个长度为10的数组并用数字1填充：

const arr = new Array(10);
arr.fill(1);
console.log(arr); // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

这种用法非常适合需要静态数组的情况，无论是在测试中模拟数据，或者在某些算法中需要特定初始值的数组时。

2. 重置数组中的元素：

如果有时候需要重置部分或全部数组的元素，fill也提供了简单直接的解决方案：

let data = [23, 45, 67, 89, 12];
data.fill(0);
console.log(data); // [0, 0, 0, 0, 0]

3. 处理部分数组：

通过start和end参数，fill提供了一种动态方法来部分修改数组，例如更改或掩码某些具体部分：

let scores = [12, 25, 37, 50, 65];
scores.fill(0, 1, 4);
console.log(scores); // [12, 0, 0, 0, 65]

这种技术在数据分析应用中可能很有用，特别是当需要忽略或重点关注某一个范围内的数据时。

动态数组填充的局限性

虽然fill方法非常有用，但它也有一些局限性。最显著的是它对数组元素填充只能用同一个单值。这意味着创建动态数组（例如，每一个元素是递增数列或复杂对象）时，fill 本身无法直接满足需求。

例如，如果希望创建一个包含不同对象实例的数组，单靠fill是做不到的：

const arr = new Array(5).fill({});
console.log(arr); // 每个元素将引用到同一个对象

在这种情况下，所有数组元素都指向同一个对象。若要每一个元素是不同的实例，可以使用 map 或其他方法：

const arr = new Array(5).fill(null).map(() => ({}));
console.log(arr); // 每个元素都是不同的对象实例

使用 fill 的注意事项

1. 修改现有数组：

fill会直接修改原数组而不是返回一个新数组，在某些场景下这可能是不希望发生的。如果需要保留原数组而生成一个新数组，应结合map、slice等方法：

let original = [1, 2, 3, 4];
let filled = original.slice().fill(0);
console.log(original); // [1, 2, 3, 4]
console.log(filled);   // [0, 0, 0, 0]

2. 索引超出范围：

如果start或end参数超过数组合法范围，JavaScript中的fill方法会自动处理这些情况，并不会抛出错误。它会在合法范围内填充元素。

const arr = [1, 2, 3];
arr.fill(0, 10, 12); // 没有任何影响，因为开始索引超出范围
console.log(arr); // [1, 2, 3]

arr.fill(4, 1, 5); // 从索引1开始到末尾，因为end超过边界
console.log(arr); // [1, 4, 4]

通过以上内容可以看到，fill方法在某些特定场景是一个相当有用的工具。它使得数组的操作更加直观和简便，减少了使用循环填充数组值的麻烦，是现代JavaScript编程中的一个小但强大的工具。