js fill函数填充数组或对象的问题怎么解决

这篇文章主要讲解了“js fill函数填充数组或对象的问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“js fill函数填充数组或对象的问题怎么解决”吧！

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

js 的数组有一个 fill 方法，可以给数组填充数据，这个方法有三个参数，从左到右依次为 要填充的数据，填充的起始位置（默认为0），停止填充的位置（默认是数组的长度），这个方法不改变原数组，如下：

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函数应该是直接我把传递的参数 [] 进行了赋值，所以我给其中一个数组赋值是，发现所有的数组都有值了，所以想要进行二维数组的初始化，不能这么做；

解决方法： 为了解决这个问题，想到了另外一个方法,就是使用map方法，如下：

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

这里先创建一个长度为5，全为0的数组，然后map这个数组，返回一个空数组，此时每个数组就都不一样了，注意：这个fill(0)也是必要的，因为全为空的数组不会执行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函数填充数组或对象的问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！