JS fill函数填充数组或对象的解决方法

js fill函数填充数组或对象的问题

JavaScript中的Array对象提供了一个名为fill的方法，用于向数组中填充指定数据。该方法接收三个参数，从左至右依次分别为：要填充的具体数值、填充的起始索引位置（默认值为0）以及填充的结束索引位置（默认值为数组长度）。需要注意的是，fill方法会直接修改原数组并返回该数组，而不会创建一个新的数组实例。具体示例如下：

let arr = [0,0,0,0,0]
let res = arr.fill(1,1,2)
console.log(res)    // [0, 1, 0, 0, 0]
let oneParam = arr.fill(1)
console.log(oneParam)  // [1,1,1,1,1]
console.log(arr)   // [0,0,0,0,0]

问题场景： 有一次，我尝试利用该方法来初始化一个二维数组，代码如下：

let arr = new Array(5).fill([])

我的初衷是创建一个长度为5的数组，且该数组的每一项都应当是一个独立的空数组。然而在实际操作中遇到了问题：生成的数组中，这5个元素实际上都指向了内存中的同一个数组对象。这是因为fill函数在填充时，直接将传递的参数引用赋值给了所有位置。因此，当我修改其中任意一个子数组时，会发现所有子数组都发生了相同的变化。由此可见，直接使用fill来初始化二维数组是不可行的；

解决方法： 针对上述问题，我想到了一种替代方案，即结合使用map方法，具体实现如下：

let arr = new Array(5).fill(0).map(item=>[])  

首先创建一个长度为5且元素全为0的数组，随后对该数组执行map操作，在回调函数中返回一个新的空数组。此时，生成的每个子数组都是独立的对象，互不影响。需要特别注意：前一步中使用fill(0)生成全0数组是必要的步骤，因为如果直接创建全为undefined的空数组，map函数将不会遍历到这些空位，从而导致初始化失败。

扩展：js--数组的 fill() 填充方法详解

前言

我们已经了解了多种初始化数组的方式，但在初始化后，数组中的未赋值项默认为empty空位占位符。如何为这些空位添加默认元素？ES6标准引入了fill()方法来实现这一操作。本文将对数组fill()方法的详细使用场景进行总结。

正文

1、fill() 语法规范

fill()方法的作用是用一个固定值填充数组中从起始索引到终止索引（不包含终止索引）范围内的所有元素。该方法会返回修改后的原始数组，不会创建新数组。

使用语法如下：array.fill( value [,start [,end]])，各参数含义如下：

value：用于填充数组元素的值，此为必填参数。

start：可选的起始索引位置，默认值为0。

end：可选的终止索引位置，默认值为 this.length。

2、fill() 的使用示例

// 当传入单个参数的时候，该方法会用该参数的值填充整个数组
    var arr1 = new Array(5)
    console.log(arr1.fill(1)); //[1,1,1,1,1]
    var arr2 = [1, 2, 3, 4]
    console.log(arr2.fill(0)); //[0,0,0,0]

    // 当传入两个参数的时候，第一个参数为填充的元素，第二个为填充元素的起始位置
    var arr3 = [0, 1, 2, 3, 4, 5, 6]
    console.log(arr3.fill(1, 3)); //[0,1,2,1,1,1,1]

    // 当传入三个参数的时候，第一个参数为填充的元素，第二个参数和第三个参数分别指填充元素的起始和终止位置，不修改终止位置元素
    var arr4 = [0, 1, 2, 3, 4, 5]
    console.log(arr4.fill(1, 3, 5)); //[0,1,2,1,1,5]
    
    //如果提供的起始位置或结束位置为负数，则他们会被加上数组的长度来算出最终的位置，例如 起始位置为-1 就相当于array.length-1
    var arr5 = [0, 1, 2, 3, 4, 5]
    console.log(arr5.fill(1, -3));//[0,1,2,1,1,1]
    var arr6 = [0, 1, 2, 3, 4, 5]
    console.log(arr6.fill(1, 3, -2));//[0,1,2,1,4,5]

到此这篇关于js fill函数填充数组或对象的问题的文章就介绍到这了,更多相关js fill函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！