JavaScript 数组填充方法 Array.fill

1. 前言

---

项目开发中，我们经常会定义具有特定长度的初始化数组，数组中的每一项元素默认为 empty 空位占位

1. const arr = new Array(3)
2. console.log(arr); // [空属性 × 3]

如果对数组这些空位添加默认的元素，ES6 提供了 fill() 方法实现这一操作，本文详细总结 fill() 方法的使用

1. const arr = new Array(3).fill(0)
2. console.log(arr); // [0, 0, 0]

2. fill() 语法

---

fill() 方法用一个固定值填充一个数组从起始索引到终止索引内的全部元素，不包含终止索引

返回修改后的数组，不修改原数组。使用语法：array.fill( value [,start [,end] ] )

1. const arr = ['a', 'b', 'c', 'd', 'e']
2. arr.fill('**'); // ['**', '**', '**', '**', '**']
3. arr.fill('**', 2); // ['a', 'b', '**', '**', '**']
4. arr.fill('**', 2, 4); // ['a', 'b', '**', '**', 'e']

3. fill() 陷阱

---

在 JS 中可以使用 new Array(n).fill() 快速创建一个数组并填充默认值

快速场景一个用 0 填充的数组：

1. const arr = new Array(3).fill(0)
2. console.log(arr); // [0, 0, 0]

如果想要创建一个用对象填充的数组的话，自然也想到这种用法

1. const arr = new Array(2).fill({ id: "", name: "" })
2. // [
3. // { "id": "", "name": "" },
4. // { "id": "", "name": "" },
5. // ]
6. console.log(arr);

表面上看似确实创建了一个用空对象填充的数组对象，然而实际上存在一个巨大的坑

因为是使用同一个对象来填充数组的，而对象是引用类型，会造成数组中所有的对象都是连动的，即: 牵一发而动前身

1. const arr = new Array(2).fill({ id: "", name: "" })
2. arr[0].id = 1
3. // [
4. // { "id": 1, "name": "" },
5. // { "id": 1, "name": "" },
6. // ]
7. console.log(arr);

综上所述：很遗憾，数组填充基本数据类型是没有问题的，填充对象则需要手动实现，建议自定义个原型方法

1. /**
2. * 数组填充增强(支持引用类型)
3. **/
4. Array.prototype.fillPlus = function (item) {
5. // 深拷贝
6. function copy(object) {
7. let data = object instanceof Array ? [] : {}
8. for (const [key, value] of Object.entries(object)) {
9. data[key] = typeof value == 'object' ? copy(value) : value;
10. }
11. return data
12. }
13. // 手动填充数据
14. const data = []
15. for (let index = 0; index < this.length; index++) {
16. data[index] = copy(item);
17. }
18. return data
19. }
20. // 数组中的对象不会有连动了
21. const arr = new Array(3).fillPlus({ name: "", list: [] })