JavaScript 快速填充数组

1.用基本类型数据填充数组

假如你想快速创建一个长度为3，内容全部都是数字0的数组，可以使用 array.fill(initialValue)，这是一个快速填充数组的函数，在数组上调用这个函数时，所有的元素值都为 initialValue

            let len = 3;
            let arr = Array(len).fill(0);
            arr; // [0, 0, 0]
        

2. 用对象填充数组

2.1 同样使用 array.fill() 这个函数，填充 { val: 0 }

            let len = 5;
            let arr = Array(len).fill({ val: 0}});
            arr; // [{ val: 0 }, { val: 0 }, { val: 0 }]
        

这种方式创建了一个所有元素都引用同一对象的数组，如果你修改其中一个，数组中的其他项都会被更改。假如继续执行以下：

            arr[1].value = 5;
            arr; // [{ val: 5 }, { val: 5 }, { val: 5 }]
        

更改数组的第二项 arr[1].value = 5 会更改数组中的所有项。

2.2 如果希望填充的不是同一个对象的引用，可以使用 Array.from() 这个函数。

Array.from() 方法对一个数组或可迭代对象创建一个新的，浅拷贝的数组。第一个参数是要遍历的数组或迭代对象，第二个参数是遍历时元素执行的回调函数。例如：

            let len = 3;
            let arrNoRef = Array.from(Array(len), () => {
                return { val: 0 };
            });
            arrNoRef; // [{ val: 0 }, { val: 0 }, { val: 0 }]
        

该数组的任意元素被修改后都不会影响其他元素。例如：

            arrNoRef[1].value = 5;
            arrNoRef; // [{ val: 0 }, { val: 5 }, { val: 0 }]
        

arrNoRef[1].value = 5 只修改了数组的第二项。

2.3 使用 Array.map() 来初始化

我们按照上面思路使用 Array.map() 实现初始化，如下：

            const len = 3;
            const arrUseMap = Array(len).map(() => {
                return { value: 0 };
            });
            arrUseMap; // [empty × 3]
        

我们期望 arrUseMap 的值是 [{ val: 0 }, { val: 0 }, { val: 0 }]，但实际却是 [empty × 3] 原因是 Array(length) 创建出来的元素值是空的(empty)，而 Array.map()会忽略这些空元素。

将代码改为如下：

            const len = 3;
            const arrUseMap = [...Array(len)].map(() => {
                return { value: 0 };
            });
            arrUseMap; // [{ val: 0 }, { val: 0 }, { val: 0 }]
        

通过扩展运算符 [...Array(length)] 将会使初始值设为 undefined，这样就能让 Array.map() 遍历上了。