摘要：創(chuàng)建數(shù)組構(gòu)造函數(shù)如果要?jiǎng)?chuàng)建具有給定長(zhǎng)度的，常用的方法是使用構(gòu)造函數(shù)這種方法很方便，但是有兩個(gè)缺點(diǎn)即便你稍后再用值把數(shù)組完全填滿，這種空洞也會(huì)使這個(gè)略微變慢。所以操作這個(gè)數(shù)組時(shí)應(yīng)該比用構(gòu)造函數(shù)創(chuàng)建的更快。

翻譯：瘋狂的技術(shù)宅
原文： http://2ality.com/2018/12/cre...

本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

創(chuàng)建數(shù)組的最佳方法是通過字面方式：

const arr = [0,0,0];

不過這并不是長(zhǎng)久之計(jì)，比如當(dāng)我們需要?jiǎng)?chuàng)建大型數(shù)組時(shí)。這篇博文探討了在這種情況下應(yīng)該怎么做。

在大多數(shù)編程語(yǔ)言中，數(shù)組是連續(xù)的值序列。在 JavaScript 中，Array 是一個(gè)將索引映射到元素的字典。它可以存在空洞（holes） —— 零和數(shù)組長(zhǎng)度之間的索引沒有映射到元素（“缺失索引”）。例如，下面的 Array 在索引 1 處有一個(gè)空洞：

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

沒有空洞的數(shù)組也稱為 dense 或 packed。密集數(shù)組往往表現(xiàn)更好，因?yàn)樗鼈兛梢赃B續(xù)存儲(chǔ)（內(nèi)部）。一旦出現(xiàn)了空洞，內(nèi)部表示就必須改變。我們有兩種選擇：

字典。查找時(shí)會(huì)消耗更多時(shí)間，而且存儲(chǔ)開銷更大。

連續(xù)的數(shù)據(jù)結(jié)構(gòu)，對(duì)空洞進(jìn)行標(biāo)記。然后檢查對(duì)應(yīng)的值是否是一個(gè)空洞，這也需要額外的時(shí)間。

不管是哪種情況，如果引擎遇到一個(gè)空洞，它不能只返回 undefined，它必須遍歷原型鏈并搜索一個(gè)名稱為“空洞索引”的屬性，這需要花費(fèi)更多時(shí)間。

在某些引擎中，例如V8，如果切換到性能較低的數(shù)據(jù)結(jié)構(gòu)，這種改變將會(huì)是永久性的。即使所有空洞都被填補(bǔ)，它們也不會(huì)再切換回來了。

關(guān)于 V8 是如何表示數(shù)組的，請(qǐng)參閱Mathias Bynens的文章“V8中的元素類型”。

如果要?jiǎng)?chuàng)建具有給定長(zhǎng)度的 Array，常用的方法是使用 Array 構(gòu)造函數(shù) ：

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

這種方法很方便，但是有兩個(gè)缺點(diǎn)：

即便你稍后再用值把數(shù)組完全填滿，這種空洞也會(huì)使這個(gè) Array 略微變慢。

空洞的默認(rèn)值一般不會(huì)是元素的初始“值”。常見的默認(rèn)值是零。

.fill()方法會(huì)更改當(dāng)前的 Array 并使用指定的值去填充它。這有助于在用 new Array() 創(chuàng)建數(shù)組后對(duì)其進(jìn)行初始化：

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

警告：如果你用對(duì)象作為參數(shù)去 .fill() 一個(gè)數(shù)組，所有元素都會(huì)引用同一個(gè)實(shí)例（也就是這個(gè)對(duì)象沒有被克隆多份）：

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} ]);

稍后我們會(huì)遇到的一種填充方法（ Array.from() ）則沒有這個(gè)問題。

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

這一次，我們創(chuàng)建并填充了一個(gè)數(shù)組，同時(shí)里面沒有出現(xiàn)漏洞。所以操作這個(gè)數(shù)組時(shí)應(yīng)該比用構(gòu)造函數(shù)創(chuàng)建的更快。不過 創(chuàng)建 數(shù)組的速度比較慢，因?yàn)橐婵赡苄枰S著數(shù)組的增長(zhǎng)多次重新分配連續(xù)的內(nèi)存。

Array.from() 將 iterables 和類似數(shù)組的值轉(zhuǎn)換為 Arrays ，它將空洞視為 undefined 元素。這樣可以用它將每個(gè)空洞都轉(zhuǎn)換為 undefined：

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

參數(shù) {length：3} 是一個(gè)長(zhǎng)度為 3 的類似 Array 的對(duì)象，其中只包含空洞。也可以使用 new Array(3)，但這樣一般會(huì)創(chuàng)建更大的對(duì)象。
下面這種方式僅適用于可迭代的值，并且與 Array.from()具有類似的效果：

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

不過 Array.from()通過 new Array() 創(chuàng)建它的結(jié)果，所以你得到的仍然是一個(gè)稀疏數(shù)組。

如果提供映射函數(shù)作為其第二個(gè)參數(shù)，則可以使用 Array.from() 進(jìn)行映射。

使用小整數(shù)創(chuàng)建數(shù)組：

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

使用唯一（非共享的）對(duì)象創(chuàng)建數(shù)組：

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

用升序整數(shù)數(shù)列創(chuàng)建數(shù)組：

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

用任意范圍的整數(shù)進(jìn)行創(chuàng)建：

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

另一種創(chuàng)建升序整數(shù)數(shù)組的方法是用 .keys()，它也將空洞看作是 undefined 元素：

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

.keys()返回一個(gè)可迭代的序列。我們將其展開并轉(zhuǎn)換為數(shù)組。

用空洞或 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}, () => ({}))
→ [{}, {}, {}] （唯一對(duì)象）

用整數(shù)范圍填充：

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]

我更喜歡下面的方法。我的側(cè)重點(diǎn)是可讀性，而不是性能。

你是否需要?jiǎng)?chuàng)建一個(gè)空的數(shù)組，以后將會(huì)完全填充？

new Array(LEN)

你需要?jiǎng)?chuàng)建一個(gè)用原始值初始化的數(shù)組嗎？

new Array(LEN).fill(0)

你需要?jiǎng)?chuàng)建一個(gè)用對(duì)象初始化的數(shù)組嗎？

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

你需要?jiǎng)?chuàng)建一系列整數(shù)嗎？

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

如果你正在處理整數(shù)或浮點(diǎn)數(shù)的數(shù)組，請(qǐng)考慮Typed Arrays —— 它就是為這個(gè)目的而設(shè)計(jì)的。它們不能存在空洞，并且總是用零進(jìn)行初始化。

對(duì)于大多數(shù)情況，我不會(huì)過分擔(dān)心性能。即使是帶空洞的數(shù)組也很快。使代碼易于理解更有意義。

另外引擎優(yōu)化的方式和位置也會(huì)發(fā)生變化。今天最快的方案可能明天就不是了。

感謝 Mathias Bynens 和 Benedikt Meurer 幫我了解 V8 的詳細(xì)信息。

Chapter “Typed Arrays” in “Exploring ES6”

Sect. “ES6 and holes in Arrays” in “Exploring ES6”

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級(jí)公司的前端面試都問些什么

CSS Flexbox 可視化手冊(cè)

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

第三方CSS安全嗎？

談?wù)剆uper(props) 的重要性