怎样在JavaScript中创建和填充任意长度的数组 [每日前端夜话0x29]
翻译：疯狂的技术宅原文： http://2ality.com/2018/12/creating-arrays.html创建数组的最佳方法是通过字面方式：
1const arr = [0,0,0];不过这并不是长久之计，比如当我们需要创建大型数组时。这篇博文探讨了在这种情况下应该怎么做。
没有空洞的数组往往表现得更好
在大多数编程语言中，数组是连续的值序列。在 JavaScript 中，Array 是一个将索引映射到元素的字典。它可以存在空洞（holes） 【请参见：http://exploringjs.com/es6/ch_arrays.html#sec_array-holes】—— 零和数组长度之间的索引没有映射到元素（“缺失索引”）。例如，下面的 Array 在索引 1 处有一个空洞：
1> Object.keys(['a',, 'c'])2[ '0', '2' ]没有空洞的数组也称为 dense 或 packed。密集数组往往表现更好，因为它们可以连续存储（内部）。一旦出现了空洞，内部表示就必须改变。我们有两种选择：
字典。查找时会消耗更多时间，而且存储开销更大。
- 连续的数据结构，对空洞进行标记。然后检查对应的值是否是一个空洞，这也需要额外的时间。
不管是哪种情况，如果引擎遇到一个空洞，它不能只返回 undefined，它必须遍历原型链并搜索一个名称为“空洞索引”的属性，这需要花费更多时间。
在某些引擎中，例如V8，如果切换到性能较低的数据结构，这种改变将会是永久性的。即使所有空洞都被填补，它们也不会再切换回来了。
关于 V8 是如何表示数组的，请参阅Mathias Bynens的文章“V8中的元素类型”【https://v8.dev/blog/elements-kinds】。
创建数组
Array 构造函数
如果要创建具有给定长度的 Array，常用的方法是使用 Array 构造函数 ：
1const LEN = 3;2const arr = new Array(LEN);3assert.equal(arr.length, LEN);4// arr only has holes in it5assert.deepEqual(Object.keys(arr), []);这种方法很方便，但是有两个缺点：
即便你稍后再用值把数组完全填满，这种空洞也会使这个 Array 略微变慢。
- 空洞的默认值一般不会是元素的初始“值”。常见的默认值是零。
在 Array 构造函数后面加上 .fill() 方法
.fill()方法会更改当前的 Array 并使用指定的值去填充它。这有助于在用 new Array() 创建数组后对其进行初始化：
1const LEN = 3;2const arr = new Array(LEN).fill(0);3assert.deepEqual(arr, [0, 0, 0]);警告：如果你用对象作为参数去 .fill() 一个数组，所有元素都会引用同一个实例（也就是这个对象没有被克隆多份）：
1const LEN = 3;2const obj = {};34const arr = new Array(LEN).fill(obj);5assert.deepEqual(arr, [{}, {}, {}]);67obj.prop = true;8assert.deepEqual(arr,9 [ {prop:true}, {prop:true}, {prop:true} ]);稍后我们会遇到的一种填充方法（ Array.from() ）则没有这个问题。
.push() 方法
1const LEN = 3;2const arr = [];3for (let i=0; i < LEN; i++) {4 arr.push(0);5}6assert.deepEqual(arr, [0, 0, 0]);这一次，我们创建并填充了一个数组，同时里面没有出现漏洞。所以操作这个数组时应该比用构造函数创建的更快。不过 创建 数组的速度比较慢，因为引擎可能需要随着数组的增长多次重新分配连续的内存。
使用 undefined 填充数组
Array.from() 将 iterables 和类似数组的值转换为 Arrays ，它将空洞视为 undefined 元素。这样可以用它将每个空洞都转换为 undefined：
1> Array.from({length: 3})2[ undefined, undefined, undefined ]参数 {length：3} 是一个长度为 3 的类似 Array 的对象，其中只包含空洞。也可以使用 new Array(3)，但这样一般会创建更大的对象。
下面这种方式仅适用于可迭代的值，并且与 Array.from()具有类似的效果：
1> [...new Array(3)]2[ undefined, undefined, undefined ]不过 Array.from()通过 new Array() 创建它的结果，所以你得到的仍然是一个稀疏数组。
使用 Array.from() 进行映射
如果提供映射函数作为其第二个参数，则可以使用 Array.from() 进行映射。
用值填充数组
- 使用小整数创建数组：
1> Array.from({length: 3}, () => 0)2 [ 0, 0, 0 ]- 使用唯一（非共享的）对象创建数组：
1> Array.from({length: 3}, () => ({}))2[ {}, {}, {} ]按照数值范围进行创建
- 用升序整数数列创建数组：
1> Array.from({length: 3}, (x, i) => i)2[ 0, 1, 2 ]- 用任意范围的整数进行创建：
1 > const START=2, END=5;2 > Array.from({length: END-START}, (x, i) => i+START)3 [ 2, 3, 4 ]另一种创建升序整数数组的方法是用 .keys()，它也将空洞看作是 undefined 元素：
1> [...new Array(3).keys()]2[ 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]推荐的模式
我更喜欢下面的方法。我的侧重点是可读性，而不是性能。
- 你是否需要创建一个空的数组，以后将会完全填充？
1new Array(LEN)- 你需要创建一个用原始值初始化的数组吗？
1new Array(LEN).fill(0)- 你需要创建一个用对象初始化的数组吗？
1Array.from({length: LEN}, () => ({}))- 你需要创建一系列整数吗？
1Array.from({length: END-START}, (x, i) => i+START)如果你正在处理整数或浮点数的数组，请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞，并且总是用零进行初始化【http://exploringjs.com/es6/ch_typed-arrays.html】。
提示：一般来说数组的性能无关紧要
对于大多数情况，我不会过分担心性能。即使是带空洞的数组也很快。使代码易于理解更有意义。
- 另外引擎优化的方式和位置也会发生变化。今天最快的方案可能明天就不是了。
致谢
- 感谢 Mathias Bynens 和 Benedikt Meurer 帮我了解 V8 的详细信息。
扩展阅读
- Chapter “Typed Arrays” in “Exploring ES6”
【http://exploringjs.com/es6/ch_typed-arrays.html】
- Sect. “ES6 and holes in Arrays” in “Exploring ES6”
【http://exploringjs.com/es6/ch_arrays.html#sec_array-holes】
©著作权归作者所有：来自51CTO博客作者mb5ff980b461ced的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- Python 的整数与 Numpy 的数据溢出
- 从简单到复杂，一文带你搞懂滑动窗口在数组及字符串中的应用
- 一文多图带你看看如何用「对撞指针」思想巧解数组题目
- 20张图！3个视频！一文带你搞定「快慢指针」在数组中的应用
- LeetCode #80 删除排序数组中的重复项II
- LeetCode #26 删除排序数组中的重复项
- 数据结构 #1 浅谈数组
- （美团）巧用数组下标，轻轻松松找出所有元素
- 剑指Offer 图解 | 寻找旋转排序数组中的最小值