[TOC] #### 1. 前言 --- 項目開發(fā)中，我們經(jīng)常會定義具有特定長度的初始化數(shù)組，數(shù)組中的每一項元素默認(rèn)為 empty 空位占位 ```javascript const arr = new Array(3) console.log(arr); // [空屬性 × 3] ``` 如果對數(shù)組這些空位添加默認(rèn)的元素，ES6 提供了 fill() 方法實現(xiàn)這一操作，本文詳細(xì)總結(jié) fill() 方法的使用 ```javascript const arr = new Array(3).fill(0) console.log(arr); // [0, 0, 0] ``` #### 2. fill() 語法 --- fill() 方法用一個固定值填充一個數(shù)組從起始索引到終止索引內(nèi)的全部元素，不包含終止索引 返回修改后的數(shù)組，不修改原數(shù)組。使用語法：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()** 快速創(chuàng)建一個數(shù)組并填充默認(rèn)值 快速場景一個用 0 填充的數(shù)組： ```javascript const arr = new Array(3).fill(0) console.log(arr); // [0, 0, 0] ``` 如果想要創(chuàng)建一個用對象填充的數(shù)組的話，自然也想到這種用法 ```javascript const arr = new Array(2).fill({ id: "", name: "" }) // [ // { "id": "", "name": "" }, // { "id": "", "name": "" }, // ] console.log(arr); ``` 表面上看似確實創(chuàng)建了一個用空對象填充的數(shù)組對象，然而實際上存在一個巨大的坑 因為是使用同一個對象來填充數(shù)組的，而對象是引用類型，會造成數(shù)組中所有的對象都是連動的，即: 牽一發(fā)而動前身 ```javascript const arr = new Array(2).fill({ id: "", name: "" }) arr[0].id = 1 // [ // { "id": 1, "name": "" }, // { "id": 1, "name": "" }, // ] console.log(arr); ``` 綜上所述：很遺憾，數(shù)組填充基本數(shù)據(jù)類型是沒有問題的，填充對象則需要手動實現(xiàn)，建議自定義個原型方法 ```javascript /** * 數(shù)組填充增強(支持引用類型) **/ 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 } // 手動填充數(shù)據(jù) const data = [] for (let index = 0; index < this.length; index++) { data[index] = copy(item); } return data } // 數(shù)組中的對象不會有連動了 const arr = new Array(3).fillPlus({ name: "", list: [] }) ```