每日前端夜话0x29
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:4012 字 1 图
预计阅读时间: 11 分钟
翻译:疯狂的技术宅 原文: 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
构造函数 :
1const LEN = 3;
2const arr = new Array(LEN);
3assert.equal(arr.length, LEN);
4// arr only has holes in it
5assert.deepEqual(Object.keys(arr), []);
这种方法很方便,但是有两个缺点:
.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 = {};
3
4const arr = new Array(LEN).fill(obj);
5assert.deepEqual(arr, [{}, {}, {}]);
6
7obj.prop = true;
8assert.deepEqual(arr,
9 [ {prop:true}, {prop:true}, {prop:true} ]);
稍后我们会遇到的一种填充方法( Array.from()
)则没有这个问题。
1const LEN = 3;
2const arr = [];
3for (let i=0; i < LEN; i++) {
4 arr.push(0);
5}
6assert.deepEqual(arr, [0, 0, 0]);
这一次,我们创建并填充了一个数组,同时里面没有出现漏洞。所以操作这个数组时应该比用构造函数创建的更快。不过 创建 数组的速度比较慢,因为引擎可能需要随着数组的增长多次重新分配连续的内存。
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()
进行映射。
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]
我更喜欢下面的方法。我的侧重点是可读性,而不是性能。
如果你正在处理整数或浮点数的数组,请考虑Typed Arrays —— 它就是为这个目的而设计的。它们不能存在空洞,并且总是用零进行初始化【http://exploringjs.com/es6/ch_typed-arrays.html】。
致谢
扩展阅读
【http://exploringjs.com/es6/ch_typed-arrays.html】
【http://exploringjs.com/es6/ch_arrays.html#sec_array-holes】