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

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

• 什么是fill()方法？
  

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

• fill()方法的语法
  

1. array.fill(value, start, end);

复制代码

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

二、fill()方法的根本用法

• 用指定值添补整个数组
  

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

复制代码

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

• 添补部分数组
  

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

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

复制代码

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

• 利用负数索引
  

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

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

复制代码

在这个示例中，从索引-3（相当于索引2）开始到索引-1（相当于索引4，不包括索引4）的元素被添补为0。
三、fill()方法的进阶用法

• 用于数组初始化
  

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

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

复制代码

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

• 用于创建多维数组
  

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

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

复制代码

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

• 重置数组内容
  

fill()方法可以用于重置数组内容，比方在必要重新开始某个盘算或处置惩罚时。

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

复制代码

在这个示例中，数组array5的内容被重置为0。
四、实际应用案例

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

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

复制代码

在这个示例中，创建了一个长度为10的数组，并用随机数添补。
案例二：用于初始化棋盘
fill()方法可以用于初始化一个棋盘（如井字棋），并将所有位置设置为空。

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

复制代码

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

• 修改原数组
  

fill()方法会直接修改调用它的原数组。假如必要生存原数组，可以先创建它的副本。

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

复制代码

在这个示例中，通过slice()方法创建了原数组的副本，然后对副本举行添补，原数组保持不变。

• 性能考虑
  

对于大数组，fill()方法提供了一种简便且高效的添补方式，但在处置惩罚超大数组时仍需考虑性能开销。
六、总结

通过本文的先容，我们详细探讨了JavaScript中的fill()方法，从根本用法到进阶应用，并结合实际案例展示了它的强大功能。掌握fill()方法，可以让你在处置惩罚数组时更加得心应手。

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

   推荐：
  

• JavaScript
  
• react
  
• vue
  

  

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。