【JavaScript】详解数组方法 fill()

news2025/1/10 21:10:34

文章目录

- 一、`fill()`方法简介
- 二、`fill()`方法的基本用法
- 三、`fill()`方法的进阶用法
- 四、实际应用案例
- 五、注意事项
- 六、总结

在JavaScript中，fill()方法是数组操作中一个非常有用的方法。它可以快速地用特定值填充数组的全部或部分内容。理解fill()方法的工作机制和使用场景，有助于编写更简洁和高效的代码。本文将详细介绍fill()方法的语法、用法和实际应用。

一、`fill()`方法简介

什么是fill()方法？

fill()方法是ES6中引入的一个数组方法，用于将数组的全部或部分元素用指定的值进行填充。这个方法会改变原数组，并返回修改后的数组。

fill()方法的语法

array.fill(value, start, end);

value：要填充的值。
start：开始填充的索引，默认为0。
end：停止填充的索引（不包含该索引），默认为数组长度。

二、`fill()`方法的基本用法

用指定值填充整个数组

const array1 = [1, 2, 3, 4];
array1.fill(0);
console.log(array1); // 输出: [0, 0, 0, 0]

在这个示例中，数组array1的所有元素都被填充为0。

填充部分数组

你可以指定填充的开始和结束索引，以便只填充数组的一部分。

const array2 = [1, 2, 3, 4, 5];
array2.fill(0, 1, 4);
console.log(array2); // 输出: [1, 0, 0, 0, 5]

在这个示例中，从索引1开始到索引4（不包括索引4）的元素被填充为0。

使用负数索引

fill()方法支持负数索引，这些索引会被解释为从数组末尾开始的位置。

const array3 = [1, 2, 3, 4, 5];
array3.fill(0, -3, -1);
console.log(array3); // 输出: [1, 2, 0, 0, 5]

在这个示例中，从索引-3（相当于索引2）开始到索引-1（相当于索引4，不包括索引4）的元素被填充为0。

三、`fill()`方法的进阶用法

用于数组初始化

fill()方法可以方便地初始化一个数组，并用相同的值填充。

const array4 = new Array(5).fill(1);
console.log(array4); // 输出: [1, 1, 1, 1, 1]

在这个示例中，创建了一个长度为5的数组，并用1填充所有元素。

用于创建多维数组

你可以使用fill()方法和map()方法结合，来创建多维数组。

const rows = 3;
const cols = 3;
const multiArray = new Array(rows).fill(null).map(() => new Array(cols).fill(0));
console.log(multiArray); // 输出: [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

在这个示例中，创建了一个3x3的二维数组，所有元素初始化为0。

重置数组内容

fill()方法可以用于重置数组内容，例如在需要重新开始某个计算或处理时。

let array5 = [1, 2, 3, 4, 5];
array5.fill(0);
console.log(array5); // 输出: [0, 0, 0, 0, 0]

在这个示例中，数组array5的内容被重置为0。

四、实际应用案例

案例一：用于生成测试数据

fill()方法可以用于生成大量测试数据，例如初始化一个包含随机数的数组。

const randomArray = new Array(10).fill(0).map(() => Math.floor(Math.random() * 100));
console.log(randomArray); // 输出一个包含随机数的数组

在这个示例中，创建了一个长度为10的数组，并用随机数填充。

案例二：用于初始化棋盘

fill()方法可以用于初始化一个棋盘（如井字棋），并将所有位置设置为空。

const boardSize = 3;
const board = new Array(boardSize).fill(null).map(() => new Array(boardSize).fill(null));
console.log(board); // 输出: [[null, null, null], [null, null, null], [null, null, null]]

在这个示例中，创建了一个3x3的二维数组，并用null初始化所有位置。

五、注意事项

修改原数组

fill()方法会直接修改调用它的原数组。如果需要保留原数组，可以先创建它的副本。

const originalArray = [1, 2, 3];
const filledArray = originalArray.slice().fill(0);
console.log(originalArray); // 输出: [1, 2, 3]
console.log(filledArray); // 输出: [0, 0, 0]