解決JS使用fill()進行數組填充遇到的問題

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

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

前言：

最近在做算法題時，遇到需要創(chuàng)建二維數組并進行初始化的情況，剛開始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進行二維數組的初始化，但無論怎樣我都通不過測試用例。這讓我十分納悶，無奈之下，只能對照著標準代碼一句一句排查，終于讓我找到了罪魁禍首：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（）方法重學一下，避免下次再出現(xiàn)類似的問題。

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

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

不同點

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

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

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

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

為什么會造成這樣的結果呢？

首先我們先來自己大概實現(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 的值給每一項，并且會改變原數組的值。

注意: 這個實現(xiàn)并沒有處理一些邊緣情況和錯誤檢查，所以它并不是一個完全準確的實現(xiàn)。真實的 Array.prototype.fill() 方法會更加復雜，因為它需要處理各種邊緣情況和錯誤條件。

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