[科普] JS中Object的keys是無序的嗎

do or never do.

關(guān)注并將「趣談前端」設(shè)為星標(biāo)

每早08:30按時(shí)推送技術(shù)干貨/優(yōu)秀開源/技術(shù)思維

在最開始學(xué)習(xí) JavaScript 時(shí)，我一直被灌輸 Object 中的 Key 是無序的，不可靠的，而與之相對(duì)的是 Map 實(shí)例會(huì)維護(hù)鍵值對(duì)的插入順序。

「But，Object 的鍵值對(duì)真的是無序的嗎？」實(shí)際上在 ES2015 以后，Object.keys 的規(guī)則變了：

在一些現(xiàn)代的瀏覽器中，keys 輸出順序是可以預(yù)測(cè)的！

Key 都為自然數(shù)：

注意這里的自然數(shù)是指正整數(shù)或 0，如果是其他類的 Number —— 浮點(diǎn)數(shù)或者負(fù)數(shù) —— 都會(huì)走到下一組類型里，像NaN或者Infinity這種也自然歸到下一個(gè)類型里，但是像科學(xué)記數(shù)法這個(gè)會(huì)稍微特殊一點(diǎn)，感興趣的同學(xué)可以自己試一下。

總結(jié)來說，就是當(dāng)前的 key 如果是自然數(shù)就按照自然數(shù)的大小進(jìn)行升序排序。

const?objWithIndices?=?{
??23:?23,
??'1':?1,
??1000:?1000
};

console.log(Reflect.ownKeys(objWithIndices));?//?["1",?"23",?"1000"]
console.log(Object.keys(objWithIndices));?//?["1",?"23",?"1000"]
console.log(Object.getOwnPropertyNames(objWithIndices));?//?["1",?"23",?"1000"]

包括在 for-in 循環(huán)的遍歷中，keys 也是按照這個(gè)順序執(zhí)行的。

Key 都為 String：

如果 key 是不為自然數(shù)的 String（Number 也會(huì)轉(zhuǎn)為 String）處理，則按照加入的時(shí)間順序進(jìn)行排序。

const?objWithStrings?=?{
??"002":?"002",
??c:?'c',
??b:?"b",
??"001":?"001",
}

console.log(Reflect.ownKeys(objWithStrings));?//?["002",?"c",?"b",?"001"]
console.log(Object.keys(objWithStrings));//?["002",?"c",?"b",?"001"]
console.log(Object.getOwnPropertyNames(objWithStrings));//?["002",?"c",?"b",?"001"]

Key 都為symbol

const?objWithSymbols?=?{
??[Symbol("first")]:?"first",
??[Symbol("second")]:?"second",
??[Symbol("last")]:?"last",
}

console.log(Reflect.ownKeys(objWithSymbols));//?[Symbol(first),?Symbol(second),?Symbol(last)]
console.log(Object.keys(objWithSymbols));//?[Symbol(first),?Symbol(second),?Symbol(last)]
console.log(Object.getOwnPropertyNames(objWithSymbols));//?[Symbol(first),?Symbol(second),?Symbol(last)]

如果 Key 都為 Symbol，順序和 String 一樣，也是按照添加的順序進(jìn)行排序的。

如果是以上類型的相互結(jié)合

const?objWithStrings?=?{
??"002":?"002",
??[Symbol("first")]:?"first",
??c:?"c",
??b:?"b",
??"100":?"100",
??"001":?"001",
??[Symbol("second")]:?"second",
}

console.log(Reflect.ownKeys(objWithStrings));
//?["100",?"002",?"c",?"b",?"001",?Symbol(first),?Symbol(second)]

結(jié)果是先按照自然數(shù)升序進(jìn)行排序，然后按照非數(shù)字的 String 的加入時(shí)間排序，然后按照 Symbol 的時(shí)間順序進(jìn)行排序，也就是說他們會(huì)先按照上述的分類進(jìn)行拆分，先按照自然數(shù)、非自然數(shù)、Symbol 的順序進(jìn)行排序，然后根據(jù)上述三種類型下內(nèi)部的順序進(jìn)行排序。

Recap

1. 在 ES6 之前 Object 的鍵值對(duì)是無序的；
2. 在 ES6 之后 Object 的鍵值對(duì)按照自然數(shù)、非自然數(shù)和 Symbol 進(jìn)行排序，自然數(shù)是按照大小升序進(jìn)行排序，其他兩種都是按照插入的時(shí)間順序進(jìn)行排序。

如果你覺得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

• 點(diǎn)個(gè)【在看】，或者分享轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容
• 關(guān)注公眾號(hào)【趣談前端】，定期分享?工程化?/?可視化?/?低代碼?/?優(yōu)秀開源。