怎样在JavaScript中建立和填充任意长度的数组

翻译：疯狂的技术宅
原文： http://2ality.com/2018/12/cre...

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

建立数组的最佳方法是经过字面方式：

const arr = [0,0,0];

不过这并非长久之计，好比当咱们须要建立大型数组时。这篇博文探讨了在这种状况下应该怎么作。

没有空洞的数组每每表现得更好

在大多数编程语言中，数组是连续的值序列。在 JavaScript 中，Array 是一个将索引映射到元素的字典。它能够存在空洞（holes） —— 零和数组长度之间的索引没有映射到元素（“缺失索引”）。例如，下面的 Array 在索引 1 处有一个空洞：

> Object.keys(['a',, 'c'])
[ '0', '2' ]

没有空洞的数组也称为 dense 或 packed。密集数组每每表现更好，由于它们能够连续存储（内部）。一旦出现了空洞，内部表示就必须改变。咱们有两种选择：

• 字典。查找时会消耗更多时间，并且存储开销更大。
• 连续的数据结构，对空洞进行标记。而后检查对应的值是不是一个空洞，这也须要额外的时间。

不论是哪一种状况，若是引擎遇到一个空洞，它不能只返回 undefined，它必须遍历原型链并搜索一个名称为“空洞索引”的属性，这须要花费更多时间。

在某些引擎中，例如V8，若是切换到性能较低的数据结构，这种改变将会是永久性的。即便全部空洞都被填补，它们也不会再切换回来了。

关于 V8 是如何表示数组的，请参阅Mathias Bynens的文章“V8中的元素类型”。

建立数组

Array 构造函数

若是要建立具备给定长度的 Array，经常使用的方法是使用 Array 构造函数 ：

const LEN = 3;
const arr = new Array(LEN);
assert.equal(arr.length, LEN);
// arr only has holes in it
assert.deepEqual(Object.keys(arr), []);

这种方法很方便，可是有两个缺点：

• 即使你稍后再用值把数组彻底填满，这种空洞也会使这个 Array 略微变慢。
• 空洞的默认值通常不会是元素的初始“值”。常见的默认值是零。

在 Array 构造函数后面加上 .fill() 方法

.fill()方法会更改当前的 Array 并使用指定的值去填充它。这有助于在用 new Array() 建立数组后对其进行初始化：

const LEN = 3;
const arr = new Array(LEN).fill(0);
assert.deepEqual(arr, [0, 0, 0]);

警告：若是你用对象做为参数去 .fill() 一个数组，全部元素都会引用同一个实例（也就是这个对象没有被克隆多份）：

const LEN = 3;
const obj = {};

const arr = new Array(LEN).fill(obj);
assert.deepEqual(arr, [{}, {}, {}]);

obj.prop = true;
assert.deepEqual(arr,
  [ {prop:true}, {prop:true}, {prop:true} ]);

稍后咱们会遇到的一种填充方法（ Array.from() ）则没有这个问题。

.push() 方法

const LEN = 3;
const arr = [];
for (let i=0; i < LEN; i++) {
  arr.push(0);
}
assert.deepEqual(arr, [0, 0, 0]);

这一次，咱们建立并填充了一个数组，同时里面没有出现漏洞。因此操做这个数组时应该比用构造函数建立的更快。不过 建立 数组的速度比较慢，由于引擎可能须要随着数组的增加屡次从新分配连续的内存。

使用 undefined 填充数组

Array.from() 将 iterables 和相似数组的值转换为 Arrays ，它将空洞视为 undefined 元素。这样能够用它将每一个空洞都转换为 undefined：

> Array.from({length: 3})
[ undefined, undefined, undefined ]

参数 {length：3} 是一个长度为 3 的相似 Array 的对象，其中只包含空洞。也可使用 new Array(3)，但这样通常会建立更大的对象。
下面这种方式仅适用于可迭代的值，而且与 Array.from()具备相似的效果：

> [...new Array(3)]
[ undefined, undefined, undefined ]

不过 Array.from()经过 new Array() 建立它的结果，因此你获得的仍然是一个稀疏数组。

使用 Array.from() 进行映射

若是提供映射函数做为其第二个参数，则可使用 Array.from() 进行映射。

用值填充数组

• 使用小整数建立数组：

  > Array.from({length: 3}, () => 0)
  [ 0, 0, 0 ]

• 使用惟一（非共享的）对象建立数组：

  > Array.from({length: 3}, () => ({}))
  [ {}, {}, {} ]

按照数值范围进行建立

• 用升序整数数列建立数组：

  > Array.from({length: 3}, (x, i) => i)
  [ 0, 1, 2 ]

• 用任意范围的整数进行建立：

  > const START=2, END=5;
  > Array.from({length: END-START}, (x, i) => i+START)
  [ 2, 3, 4 ]

另外一种建立升序整数数组的方法是用 .keys()，它也将空洞看做是 undefined 元素：

> [...new Array(3).keys()]
[ 0, 1, 2 ]

.keys()返回一个可迭代的序列。咱们将其展开并转换为数组。

备忘速查：建立数组

用空洞或 undefined填充：

• new Array(3)
  → [ , , ,]
• Array.from({length: 2})
  → [undefined, undefined]
• [...new Array(2)]
  → [undefined, undefined]

填充任意值：

• const a=[]; for (let i=0; i<3; i++) a.push(0);
  → [0, 0, 0]
• new Array(3).fill(0)
  → [0, 0, 0]
• Array.from({length: 3}, () => ({}))
  → [{}, {}, {}] （惟一对象）

用整数范围填充：

• Array.from({length: 3}, (x, i) => i)
  → [0, 1, 2]
• const START=2, END=5; Array.from({length: END-START}, (x, i) => i+START)
  → [2, 3, 4]
• [...new Array(3).keys()]
  → [0, 1, 2]

推荐的模式

我更喜欢下面的方法。个人侧重点是可读性，而不是性能。

• 你是否须要建立一个空的数组，之后将会彻底填充？

  new Array(LEN)

• 你须要建立一个用原始值初始化的数组吗？

  new Array(LEN).fill(0)

• 你须要建立一个用对象初始化的数组吗？

  Array.from({length: LEN}, () => ({}))

• 你须要建立一系列整数吗？

  Array.from({length: END-START}, (x, i) => i+START)

若是你正在处理整数或浮点数的数组，请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞，而且老是用零进行初始化。

提示：通常来讲数组的性能可有可无

• 对于大多数状况，我不会过度担忧性能。即便是带空洞的数组也很快。使代码易于理解更有意义。
• 另外引擎优化的方式和位置也会发生变化。今天最快的方案可能明天就不是了。

致谢

• 感谢 Mathias Bynens 和 Benedikt Meurer 帮我了解 V8 的详细信息。

扩展阅读

• Chapter “Typed Arrays” in “Exploring ES6”
• Sect. “ES6 and holes in Arrays” in “Exploring ES6”

---

欢迎继续阅读本专栏其它高赞文章：

• 12个使人惊叹的CSS实验项目
• 世界顶级公司的前端面试都问些什么
• CSS Flexbox 可视化手册
• 过节很无聊？仍是用 JavaScript 写一个脑力小游戏吧！
• 从设计者的角度看 React
• CSS粘性定位是怎样工做的
• 一步步教你用HTML5 SVG实现动画效果
• 程序员30岁前月薪达不到30K，该何去何从
• 第三方CSS安全吗？
• 谈谈super(props) 的重要性

---

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章