0


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

文章目录

在JavaScript中,

fill()

方法是数组操作中一个非常有用的方法。它可以快速地用特定值填充数组的全部或部分内容。理解

fill()

方法的工作机制和使用场景,有助于编写更简洁和高效的代码。本文将详细介绍

fill()

方法的语法、用法和实际应用。

一、

fill()

方法简介

  1. 什么是fill()方法?
fill()

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

  1. fill()方法的语法
array.fill(value, start, end);
  • value:要填充的值。
  • start:开始填充的索引,默认为0。
  • end:停止填充的索引(不包含该索引),默认为数组长度。

二、

fill()

方法的基本用法

  1. 用指定值填充整个数组
const array1 =[1,2,3,4];
array1.fill(0);
console.log(array1);// 输出: [0, 0, 0, 0]

在这个示例中,数组

array1

的所有元素都被填充为

0

  1. 填充部分数组

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

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

在这个示例中,从索引

1

开始到索引

4

(不包括索引

4

)的元素被填充为

0

  1. 使用负数索引
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()

方法的进阶用法

  1. 用于数组初始化
fill()

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

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

在这个示例中,创建了一个长度为

5

的数组,并用

1

填充所有元素。

  1. 用于创建多维数组

你可以使用

fill()

方法和

map()

方法结合,来创建多维数组。

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

在这个示例中,创建了一个

3x3

的二维数组,所有元素初始化为

0

  1. 重置数组内容
fill()

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

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

在这个示例中,数组

array5

的内容被重置为

0

四、实际应用案例

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

fill()

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

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

在这个示例中,创建了一个长度为

10

的数组,并用随机数填充。

案例二:用于初始化棋盘

fill()

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

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

在这个示例中,创建了一个

3x3

的二维数组,并用

null

初始化所有位置。

五、注意事项

  1. 修改原数组
fill()

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

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

在这个示例中,通过

slice()

方法创建了原数组的副本,然后对副本进行填充,原数组保持不变。

  1. 性能考虑

对于大数组,

fill()

方法提供了一种简洁且高效的填充方式,但在处理超大数组时仍需考虑性能开销。

六、总结

通过本文的介绍,我们详细探讨了JavaScript中的

fill()

方法,从基本用法到进阶应用,并结合实际案例展示了它的强大功能。掌握

fill()

方法,可以让你在处理数组时更加得心应手。

  • 基本用法:理解fill()方法的语法和基本操作。
  • 进阶用法:学习如何使用fill()方法进行数组初始化、创建多维数组和重置数组内容。
  • 实际应用:通过实际案例,展示fill()方法在生成测试数据和初始化棋盘中的应用。

推荐:

  • JavaScript
  • react
  • vue

在这里插入图片描述


本文转载自: https://blog.csdn.net/lph159/article/details/140854810
版权归原作者 Peter-Lu 所有, 如有侵权,请联系我们删除。

“【JavaScript】详解数组方法 fill()”的评论:

还没有评论