[TOC] #### 1. 前言 --- 項目開發中，我們經常會定義具有特定長度的初始化數組，數組中的每一項元素默認為 empty 空位占位 ```javascript const arr = new Array(3) console.log(arr); // [空屬性 × 3] ``` 如果對數組這些空位添加默認的元素，ES6 提供了 fill() 方法實現這一操作，本文詳細總結 fill() 方法的使用 ```javascript const arr = new Array(3).fill(0) console.log(arr); // [0, 0, 0] ``` #### 2. fill() 語法 --- fill() 方法用一個固定值填充一個數組從起始索引到終止索引內的全部元素，不包含終止索引 返回修改后的數組，不修改原數組。使用語法：array.fill( value [,start [,end] ] ) ```javascript const arr = ['a', 'b', 'c', 'd', 'e'] arr.fill('**'); // ['**', '**', '**', '**', '**'] arr.fill('**', 2); // ['a', 'b', '**', '**', '**'] arr.fill('**', 2, 4); // ['a', 'b', '**', '**', 'e'] ``` #### 3. fill() 陷阱 --- 在 JS 中可以使用 **new Array(n).fill()** 快速創建一個數組并填充默認值 快速場景一個用 0 填充的數組： ```javascript const arr = new Array(3).fill(0) console.log(arr); // [0, 0, 0] ``` 如果想要創建一個用對象填充的數組的話，自然也想到這種用法 ```javascript const arr = new Array(2).fill({ id: "", name: "" }) // [ // { "id": "", "name": "" }, // { "id": "", "name": "" }, // ] console.log(arr); ``` 表面上看似確實創建了一個用空對象填充的數組對象，然而實際上存在一個巨大的坑 因為是使用同一個對象來填充數組的，而對象是引用類型，會造成數組中所有的對象都是連動的，即: 牽一發而動前身 ```javascript const arr = new Array(2).fill({ id: "", name: "" }) arr[0].id = 1 // [ // { "id": 1, "name": "" }, // { "id": 1, "name": "" }, // ] console.log(arr); ``` 綜上所述：很遺憾，數組填充基本數據類型是沒有問題的，填充對象則需要手動實現，建議自定義個原型方法 ```javascript /** * 數組填充增強(支持引用類型) **/ Array.prototype.fillPlus = function (item) { // 深拷貝 function copy(object) { let data = object instanceof Array ? [] : {} for (const [key, value] of Object.entries(object)) { data[key] = typeof value == 'object' ? copy(value) : value; } return data } // 手動填充數據 const data = [] for (let index = 0; index < this.length; index++) { data[index] = copy(item); } return data } // 數組中的對象不會有連動了 const arr = new Array(3).fillPlus({ name: "", list: [] }) ```