JavaScript fill() 方法（一文讲透）

JavaScript fill() 方法：掌握数组填充的实用技巧

在日常开发中，我们常常需要初始化一个数组，或者将数组中的某些元素替换为特定值。这时候，JavaScript fill() 方法就派上了用场。它是一个简洁而强大的数组方法，能够快速地将数组中指定范围的元素填充为某个值。对于初学者来说，它可能看起来简单，但深入理解后你会发现它在数据处理、状态管理、算法实现中都极具价值。

本文将带你从基础用法到高级技巧，全面掌握 JavaScript fill() 方法。无论你是刚接触 JavaScript 的新手，还是有一定经验的中级开发者，都能从中收获实用的知识点。

什么是 JavaScript fill() 方法？

fill() 方法是 JavaScript 数组原型上的一个方法，它的作用是将数组中从起始位置到结束位置的元素，全部替换为指定的值。这个过程是“原地修改”的，意味着它会直接修改原数组，而不是返回新数组。

这个方法就像一把“填充喷枪”——你设定好目标区域和填充内容，然后“喷”上去，整片区域就被填满了。

语法如下：

array.fill(value, start, end)

• value：要填充的值，可以是数字、字符串、对象，甚至 null 或 undefined。
• start：可选参数，填充的起始索引（包含），默认为 0。
• end：可选参数，填充的结束索引（不包含），默认为数组长度。

⚠️ 注意：fill() 方法会直接修改原数组，而不是生成新数组。这点在使用时需要特别留意。

基础用法：快速初始化数组

在很多场景下，我们需要一个长度固定的数组，并且每个元素都初始化为某个默认值。比如创建一个长度为 5 的数组，每个元素都是 0，用于统计或缓存。

// 创建一个长度为 5 的数组，所有元素初始化为 0
const numbers = new Array(5).fill(0);

console.log(numbers); // [0, 0, 0, 0, 0]

这里的关键是 new Array(5)，它创建了一个长度为 5 的空数组（注意：不是 [0,0,0,0,0]，而是 [empty × 5]），然后 fill(0) 将每个空位填充为 0。

为什么不能直接用 [] 语法？

如果你写成：

const arr = [0, 0, 0, 0, 0]; // 手动写

虽然也能达到目的，但当数组长度很大时，比如 1000 个元素，手动写显然不现实。fill() 方法就解决了这个问题。

指定填充范围：灵活控制填充区域

fill() 方法的 start 和 end 参数让你可以精确控制填充的范围。这在需要部分更新数组时非常有用。

const arr = [1, 2, 3, 4, 5, 6];

// 将索引 2 到 4（不包括 4）的元素替换为 9
arr.fill(9, 2, 4);

console.log(arr); // [1, 2, 9, 9, 5, 6]

• start = 2：从第 3 个元素开始（索引从 0 开始）
• end = 4：到第 5 个元素前结束，所以只影响索引 2 和 3

📌 小提示：end 是“不包含”的，和数组切片（slice）的规则一致。

实际应用：初始化表格行

假设你要创建一个 3x3 的表格数组，初始状态全是 0，但只想把中间一行设为 1。

// 创建 3x3 的二维数组
const table = new Array(3).fill(null).map(() => new Array(3).fill(0));

// 将第 2 行（索引 1）全部设为 1
table[1].fill(1);

console.log(table);
// [
//   [0, 0, 0],
//   [1, 1, 1],
//   [0, 0, 0]
// ]

这里用到了 map() 和 fill() 的组合，是处理二维数组的常见模式。

使用非原始类型：对象与数组的填充

fill() 不仅能处理数字和字符串，还能处理对象、数组等引用类型。但这里有个重要陷阱：填充的是引用，而不是副本。

const arr = new Array(3).fill({ name: 'Alice' });

// 所有元素都指向同一个对象
console.log(arr[0] === arr[1]); // true

// 修改一个元素，其他也跟着变
arr[0].age = 25;

console.log(arr);
// [
//   { name: 'Alice', age: 25 },
//   { name: 'Alice', age: 25 },
//   { name: 'Alice', age: 25 }
// ]

⚠️ 陷阱警告

这是因为 fill() 填充的是同一个对象的引用。如果你希望每个元素都是独立对象，必须用 map() 创建新对象：

const arr = new Array(3).fill().map(() => ({ name: 'Alice' }));

// 现在每个对象都是独立的
console.log(arr[0] === arr[1]); // false

arr[0].age = 25;
console.log(arr[1]); // { name: 'Alice' }，没有被影响

💡 建议：当填充对象或数组时，优先使用 map()，避免引用共享问题。

与 slice、splice 的区别：理解填充的“原地”特性

很多初学者容易混淆 fill()、slice() 和 splice()，它们都涉及数组的“操作”，但本质完全不同。

const arr = [1, 2, 3, 4, 5];

// fill()：原地修改
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4, 5]

// slice()：返回新数组
const sliced = arr.slice(1, 3);
console.log(sliced); // [0, 0]
console.log(arr);    // [1, 0, 0, 4, 5] —— 原数组未变

// splice()：原地修改，但会删除并插入
arr.splice(1, 2, 'X', 'Y');
console.log(arr); // [1, 'X', 'Y', 4, 5]

比喻理解

• fill() 像“刷油漆”，直接把某段区域涂成一种颜色。
• slice() 像“复印一段”，不改变原物。
• splice() 像“拆掉一段，换上新零件”。

实际应用场景：项目中的真实案例

1. 初始化状态管理中的默认值

在前端开发中，你可能需要初始化一个状态数组，比如用户选择的“标签”列表。

// 默认选中 5 个标签，初始值为 false
const selectedTags = new Array(5).fill(false);

// 用户点击后，更新某个标签
selectedTags[2] = true;

2. 创建缓存数组用于算法预处理

在动态规划或滑动窗口算法中，常需要一个“已计算”标记数组。

// 创建一个长度为 100 的布尔数组，用于记录是否已计算
const memo = new Array(100).fill(false);

// 递归函数中使用
function fib(n) {
  if (memo[n]) return memo[n];
  // ...计算逻辑
  memo[n] = result;
  return result;
}

3. 批量设置配置项

在配置系统中，你可以用 fill() 快速设置默认配置。

// 默认配置：5 个按钮，初始状态为禁用
const buttons = new Array(5).fill({ disabled: true, label: '按钮' });

// 后续可逐个修改
buttons[0].label = '提交';

常见错误与调试建议

错误 1：忘记 fill() 会修改原数组

const arr = [1, 2, 3];
const result = arr.fill(0); // result 是 arr 本身

console.log(arr); // [0, 0, 0]，不是 [1, 2, 3]

✅ 建议：如果不想修改原数组，先 slice() 一份副本。

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

错误 2：误用 fill() 填充对象导致引用共享

如前所述，避免直接用 fill() 填充对象，除非你真的希望所有元素共享一个引用。

错误 3：start 或 end 超出数组范围

const arr = [1, 2, 3];
arr.fill(9, 10, 20); // 无影响，因为 start = 10 > arr.length
console.log(arr); // [1, 2, 3]

fill() 会自动处理越界情况，不会报错，但也不会填充。

总结：掌握 JavaScript fill() 方法的关键点

• fill() 是一个高效、简洁的数组填充方法，适合初始化、批量修改等场景。
• 它会原地修改数组，使用时需注意副作用。
• 支持指定起始和结束索引，实现局部填充。
• 填充引用类型时，注意所有元素共享同一引用，可能引发意外行为。
• 与 slice()、splice() 有本质区别，理解其“原地填充”特性至关重要。
• 在实际项目中，常用于状态初始化、算法缓存、配置设置等。

掌握 JavaScript fill() 方法，不仅能让你的代码更简洁，还能提升数据处理效率。下次当你需要“批量填充”数组时，别忘了这个小而强大的工具。