快捷導(dǎo)航

解決JS使用fill()進(jìn)行數(shù)組填充遇到的問題

更新時間：2023年09月13日 08:51:47 作者：土豆奧利奧

最近在做算法題時,遇到需要創(chuàng)建二維數(shù)組并進(jìn)行初始化的情況,剛開始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化,但無論怎樣我都通不過測試用例,所以本文就給大家詳細(xì)的介紹了如何解決這類問題以及將js中的fill（方法重學(xué)一下

前言：

最近在做算法題時，遇到需要創(chuàng)建二維數(shù)組并進(jìn)行初始化的情況，剛開始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化，但無論怎樣我都通不過測試用例。這讓我十分納悶，無奈之下，只能對照著標(biāo)準(zhǔn)代碼一句一句排查，終于讓我找到了罪魁禍?zhǔn)祝?code>Array(n).fill(new Array(n).fill('.'))。我將Array(n).fill(new Array(n).fill('.'))改成new Array(n).fill(0).map(\_ => new Array(n).fill('.'))之后，用例通過了。

接下來，我們便通過這兩句代碼來將 js 中的 fill（）方法重學(xué)一下，避免下次再出現(xiàn)類似的問題。

兩句代碼之間的區(qū)別

相同點(diǎn) 以上兩句代碼目的都是創(chuàng)建一個 n x n 的二維數(shù)組，但是它們的方式和結(jié)果是不同的。

不同點(diǎn)

let board = new Array(n).fill(new Array(n).fill('.'));

這段代碼在填充數(shù)組時，使用了同一個數(shù)組實(shí)例（通過 new Array(n).fill('.')創(chuàng)建）。這會創(chuàng)建一個數(shù)組，其中每個元素都指向同一個數(shù)組（也就是說，如果你修改其中一個數(shù)組，所有數(shù)組都會被修改）。這是因?yàn)樵?JavaScript 中，對象（包括數(shù)組）是通過引用傳遞的。
const board2: string[][] = new Array(n).fill(0).map(\_ => new Array(n).fill('.'));

這段代碼通過.map()函數(shù)創(chuàng)建了 n 個新的數(shù)組實(shí)例。這意味著每個子數(shù)組都是獨(dú)立的，修改其中一個并不會影響其他的。這是因?yàn)?map()函數(shù)會對數(shù)組的每個元素執(zhí)行回調(diào)函數(shù)，而回調(diào)函數(shù)中又創(chuàng)建了一個新的數(shù)組。

因此，盡管這兩段代碼看起來都創(chuàng)建了 n x n 的二維數(shù)組，但是他們在數(shù)組的引用和修改上有很大的不同。

為什么會造成這樣的結(jié)果呢？

首先我們先來自己大概實(shí)現(xiàn)下 fill 方法：

Array.prototype.fill = function(value, start = 0, end = this.length) {
  // Handle negative values for start
  if (start < 0) {
    start += this.length;
    if (start < 0) start = 0;
  }
  // Handle negative values for end
  if (end < 0) {
    end += this.length;
  }
  // Ensure start is not greater than end
  if (start > end) {
    [start, end] = [end, start];
  }
  // Fill the array
  for (let i = start; i < end; i++) {
    this[i] = value;
  }
  return this;
};

可以看到 fill 方法中是直接將 value 的值給每一項，并且會改變原數(shù)組的值。

注意: 這個實(shí)現(xiàn)并沒有處理一些邊緣情況和錯誤檢查，所以它并不是一個完全準(zhǔn)確的實(shí)現(xiàn)。真實(shí)的 Array.prototype.fill() 方法會更加復(fù)雜，因?yàn)樗枰幚砀鞣N邊緣情況和錯誤條件。

因此當(dāng)我們傳入一個引用類型時，數(shù)組中每一項都是對同一個對象的引用。這意味著如果你修改了一個元素，所有的元素都會受到影響。這個特性在使用 .fill() 方法填充數(shù)組時需要特別注意。

fill 方法其他需要注意的地方：

語法：

arr.fill(value ，[start]，[end]) 參數(shù)：

value：用來填充數(shù)組的值。
start （可選）：開始填充數(shù)組的索引。默認(rèn)為 0。
end （可選）：停止填充數(shù)組的索引。默認(rèn)為 arr.length。
返回值：被修改的數(shù)組，從 start 到 end 被 value 填充。

原地操作

fill() 是一個原地操作，這意味著它會直接修改原始數(shù)組，而不是創(chuàng)建一個新的數(shù)組。這與 JavaScript 中的許多其他數(shù)組方法（如 map() 或 filter()）不同，后者會返回新數(shù)組并保持原始數(shù)組不變。

負(fù)索引

fill() 方法也接受負(fù)索引，它們從數(shù)組的末尾開始計算。例如，-1 指的是最后一個元素，-2 指的是倒數(shù)第二個元素，等等。如果你對 start 或 end 參數(shù)使用負(fù)索引，fill() 將從數(shù)組末尾開始或停止填充。