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函數填充數組或對象的問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！