四个初始化 JavaScript Array数组方法及性能对比

Hi，这里是松桑，每天学习一个 JS 片段，涨涨🧀！今天带来的是四个初始化 JavaScript Array数组方法。

在 JavaScript 中初始化数组是常见的场景，初始化有多种方法，创建性能也有差异。虽然可能没有一个放之四海而皆准的解决方案，但是有一些选项您可能需要考虑。

一、Array() 构造函数

首先想到的就是 Array ()构造函数，与直觉相反，这可能是最有问题的初始化数组方法。虽然它适用于任意数量的参数来创建具有给定值的数组，但是在其他任何地方它都不能满足要求。

const arr = Array(3); // [ , , ] - 3个空槽
arr.map(() => 1); // [ , , ] - map() 会跳过空槽
arr.map((_, i) => i); // [ , , ] - map() 会跳过空槽
arr[0]; // undefined - 实际上是一个空槽

注意：

• 调用 Array() 时可以使用或不使用 new。两者都会创建一个新的 Array 实例。

• Array 构造函数传入数字来创建指定长度的数组，但存在填充结果均为空槽 undefined，而且在使用map时会直接跳过空槽。

二、Array.from()

Array.from()是一个静态方法，它从类数组对象（带有 length 属性和索引元素的对象）或可迭代对象（例如 Map 和 Set 对象）创建一个新的浅拷贝 Array 实例。

const arr = Array.from({ length: 3 }); // [undefined, undefined, undefined]
arr.map(() => 1); // [1, 1, 1]
arr.map((_, i) => i); // [0, 1, 2]
const staticArr = Array.from({ length: 3 }, () => 1); // [1, 1, 1]
const indexArr = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

Array.from('foo');  // ["f", "o", "o"]

注意：

• Array.from()对于将类数组对象(例如参数、 NodeList)或迭代器(例如 Set、 Map、 Generator)转换为实际数组非常有用；

• Array.from()可通过传递一个具有 length 属性的对象，它可以当做类数组对象，“欺骗”它来创建一个给定长度的数组。这有点慢，但能避免 Array () 构造函数空槽会被map跳过的问题；

• Array.from()允许将映射函数作为第二个参数传递，对于使用值初始化数组非常有用。

三、Array.prototype.fill()

虽然 Array.from ()非常灵活，但是使用映射函数将其填充为相同的值并不特别高效。Array.prototype.fill()允许使用相同的值填充现有数组，可以与 Array ()构造函数一起使用，避免直接用空槽填充数组。

const nullArr = new Array(3).fill(null); // [null, null, null]
const staticArr = Array.from({ length: 3 }).fill(1); // [1, 1, 1]
const indexArr = Array(3).fill(null).map((_, i) => i); // [0, 1, 2]

四、Array.prototype.map()

Array.from()允许通过第二个参数实现映射函数，但很多人认为这很难读懂。此外，还有一些边缘情况：在映射期间如何希望能够访问数组本身的话，可以使用 Map() 灵活处理；但是要注意，map 不能很好地处理空值。

const arr = Array(3).map(() => 1); // [ , , ] - map() skips empty slots
const staticArr = Array.from({ length: 3 }).map(() => 1); // [1, 1, 1]
const indexArr = Array.from({ length: 3 }).map((_, i) => i); // [0, 1, 2]
const fractionArr =
  Array.from({ length: 3 }).map((_, i, a) => i / a.length); // [0, 0.5, 1]

性能总结

如果这种操作在您的应用程序中非常常见，那么性能可能是一个问题，但是总的来说，这些选项都不是特别慢。Array ()构造函数似乎是最快的。如果与 Array.Prototype.fill ()组合，它可能是用单个值初始化数组的最佳选择。奇怪的是，即使随后链接 Array.Prototype.map ()调用以创建动态值，这种性能优势仍然存在。因此推荐的最佳使用方法如下：

// 单个值初始化数组
const initializeArrayWithValues = (n, val = 0) => Array(n).fill(val);
// 动态值初始化数组
const initializeMappedArray = (n, mapFn = (_, i) => i) =>
  Array(n).fill(null).map(mapFn);

initializeArrayWithValues(4, 2); // [2, 2, 2, 2]
initializeMappedArray(4, (_, i) => i * 2); // [0, 2, 4, 6]