摘要：创建数组构造函数如果要创建具有给定长度的，常用的方法是使用构造函数这种方法很方便，但是有两个缺点即便你稍后再用值把数组完全填满，这种空洞也会使这个略微变慢。所以操作这个数组时应该比用构造函数创建的更快。
翻译：疯狂的技术宅
原文： 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 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102067.html
摘要：接下来该填表了生成行和单元格为了填充表格可以遵循同样的方法，但这次我们需要迭代数组中的每个对象。对于每个对象，我们可以使用生成单元格。 翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 怎样用原生 JavaScript 生成表格需？本文告诉你答案！...
摘要：与稀疏数组对立的为密集数组，密集数组的索引会被持续的创建，并且其元素的数量等于其长度。创建一个长度为的数组，并初始化了个元素使用构造函数创建数组对象的时候，关键字是可以省略的。另外使用和删除元素是影响数组的长度的。 说明：本文只总结了JavaScript数组在web端的行为，不包括NodeJs端的行为。本文不涉及类型化数组（TypedArray）的讨论、总结。 一、什么是数组 数组的定...
摘要：常规元素，不能表示为或双精度的值。元素种类可从过渡转变为。这是一个简化的可视化，仅显示最常见的元素种类只能通过格子向下过渡。目前有种不同的元素种类，每种元素都有自己的一组可能的优化。再次重申更具体的元素种类可以进行更细粒度的优化。 原文：Elements kinds in V8 JavaScript 对象可以具有与它们相关联的任意属性。对象属性的名称可以包含任何字符。JavaScrip...
摘要：可以更有效地处理密集数组。然后有人提出了一个疑问为什么先指定长度再初始化测试出来会快一点其实，两者相比只是可能变慢。具体因素有很多，比如预分配一个很大的数组，这时可以变快，的函数就是这么做的。如果数组很大，预先分配大小后性能反而会提升。 在我的上一篇文章 JavaScript 在 V8 中的元素种类及性能优化 中写道： showImg(https://segmentfault.com...
摘要：默认为如果大于等于数组长度，则返回该数组不会被搜索返回值一个类型方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回。 一、创建Array对象实例 let array1 = [1,2,3,4]; //构造函数 let array2 = new Array(1,2,3,4); //[1,2,3,4] let array3 = new Arr...
阅读 2108·2021-09-27 13:35
阅读 346·2019-08-30 15:55
阅读 684·2019-08-30 15:53
阅读 422·2019-08-30 15:52
阅读 2011·2019-08-30 12:59
阅读 2086·2019-08-29 16:42
阅读 1183·2019-08-26 18:26
阅读 2281·2019-08-26 13:48
