JavaScript Array fill() (填充陣列)

陣列 (array) 的 fill() 方法用來將陣列中的所有元素（或指定範圍的元素）都填入一個固定的值。此方法會修改原陣列。

語法：

arr.fill(value[, start[, end]])

• value 是用來填充的值
• start 是可選的起始索引，預設是 0
• end 是可選的結束索引（不含），預設是陣列長度

基本用法

const arr = [1, 2, 3, 4, 5];

arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

指定填充範圍

const arr = [1, 2, 3, 4, 5];

// [0, 0, 0, 0, 0]
arr.fill(0);
console.log(arr);

// [1, 2, 3, 4, 5] (fill 是 in-place 操作，但這裡重新賦值方便演示)
const arr2 = [1, 2, 3, 4, 5];
// [1, 0, 0, 4, 5]
arr2.fill(0, 1, 3);
console.log(arr2);

const arr3 = [1, 2, 3, 4, 5];
// [1, 0, 0, 0, 0]
arr3.fill(0, 1);
console.log(arr3);

建立並初始化陣列

// 建立長度為 5 的陣列，全部填入 0
const zeros = new Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]

// 建立預設值陣列
const defaults = new Array(3).fill('default');
console.log(defaults); // ['default', 'default', 'default']

注意：填充物件會是同一個參考

// 錯誤示範：所有元素都指向同一個物件
const arr = new Array(3).fill({});
arr[0].hi = 'hi';
// [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
console.log(arr);
// 三個都是同一個物件！

// 正確做法：使用 Array.from() 或 map()
const arr2 = Array.from({ length: 3 }, function () {
  return {};
});
arr2[0].hi = 'hi';
// [{ hi: "hi" }, {}, {}]
console.log(arr2);

實際應用

// 重設分數
const scores = [85, 90, 78, 92, 88];
scores.fill(0); // 全部歸零
console.log(scores);

// 建立棋盤初始狀態
const n = 9; // Assuming n is the length for the board
const board = new Array(n).fill(null);
console.log(board);
// [null, null, null, null, null, null, null, null, null]

// 建立二維陣列（注意要用正確方式）
const grid = Array.from({ length: 3 }, function () {
  return new Array(3).fill(0);
});
console.log(grid);
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]