快捷導(dǎo)航

詳解JS對(duì)象遍歷的順序問(wèn)題

更新時(shí)間：2021年08月22日 10:28:30 作者：mysteryven

你知不知道JS對(duì)象遍歷順序，本文就來(lái)詳細(xì)的介紹了一下JS對(duì)象遍歷順序問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

可能有些同學(xué)聽(tīng)過(guò)在 JavaScript 中遍歷對(duì)象順序不固定的這一說(shuō)法。事實(shí)上，這個(gè)說(shuō)法不是特別準(zhǔn)確。

對(duì)待遍歷順序，對(duì)象有一套自己既定的規(guī)則，在此規(guī)則下呢，對(duì)象的遍歷順序會(huì)受插入元素順序的影響，但是不完全受插入元素先后順序的影響。如果您有「必須按插入元素順序遍歷」的場(chǎng)景，可以考慮使用 Map。
遍歷對(duì)象的方法有很多種，我們經(jīng)常會(huì)使用的有 for...in ，除此之外，還有：

Object.keys
Object.entries
Obejct.getOwnerProPertyNames
Reflect.ownKeys
......

上面我們列的幾個(gè)方法，都按照一樣的規(guī)則去遍歷對(duì)象。而實(shí)際的遍歷規(guī)則會(huì)根據(jù) key 值類(lèi)型的不同而不同。
在一個(gè)對(duì)象中，如果我們的 key 值是像 '1'、'200'這種正整數(shù)格式的字符串。遍歷的順序是按照 key 值的大小來(lái)排列的。
比如我們看這樣的一個(gè)例子：

const obj = {}

obj['10'] = 'a';
obj['9'] = 'b';
obj[8] = 'c';
obj[7] = 'd';

console.log(Object.keys(obj)) //  ["7", "8", "9", "10"]

我們最后的遍歷順序完全忽視了插入順序，并且，值得我們注意的是，在對(duì)象中，就算我們添加屬性時(shí)的索引值是 Number 類(lèi)型，最后的結(jié)果還是會(huì)被隱式的轉(zhuǎn)為字符串。

數(shù)組作為對(duì)象的一種，也符合上面的規(guī)則，又或許，有上面的表現(xiàn)就是因?yàn)橐嫒輸?shù)組的緣故呢。除此之外，通過(guò)上面的規(guī)則，我們還可以推斷出，對(duì)類(lèi)數(shù)組（key 值是正整數(shù)且有 length 屬性）進(jìn)行遍歷也是按照索引順序的。
另外，如果我們的 key 值是不能轉(zhuǎn)為正整數(shù)的字符串，這其中包括了可以轉(zhuǎn)換為負(fù)數(shù)的字符串（如 '-1' ）、小數(shù)格式的字符串(如 '1.0' ) 和其他的字符串。他們的遍歷順序會(huì)比較符合直覺(jué)，就是插入對(duì)象的順序：

const obj2 = {}

obj2['1.1'] = 'a';
obj2['1.0'] = 'b';
obj2['-1'] = 'c';
obj2['jack'] = 'd'

console.log(Object.keys(obj2)); //  ["1.1", "1.0", "-1", "jack"]

事實(shí)上，對(duì)象的索引值的類(lèi)型不僅可以是字符串，還可以是 Symbol 類(lèi)型。對(duì)于 Symbol 類(lèi)型而言，它的遍歷順序也是單純的按照插入對(duì)象的順序。

如果我們的對(duì)象綜合了上面所有的情況，即一個(gè)對(duì)象的索引值出現(xiàn)了所有的類(lèi)型（各種形式的字符串、Symbol 類(lèi)型），它會(huì)：

先按照我們上面提的關(guān)于正整數(shù)的規(guī)則遍歷正整數(shù)部分
按接下來(lái)會(huì)插入順序遍歷剩下的字符串
最后再按照插入順序遍歷 Symbol 類(lèi)型

相信到這里，大家已經(jīng)完全明白了對(duì)象的遍歷順序問(wèn)題，最后還有一點(diǎn)值得大家注意的點(diǎn)，是 for...in 的遍歷順序問(wèn)題。

最開(kāi)始的時(shí)候，for...in 的遍歷順序并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，瀏覽器廠商會(huì)按照他們的喜好去設(shè)置 for...in 的遍歷順序。如果您對(duì)遍歷順序有要求并且要兼容老的瀏覽器版本，建議不使用它。后來(lái) ES 2019 的一個(gè)提案對(duì)此現(xiàn)象進(jìn)行了規(guī)范，現(xiàn)在 for...in 的順序也遵循上面的規(guī)則。

盡管會(huì)遵循上面的規(guī)則，但是 for...in 還會(huì)遍歷原型的屬性。所以 for...in 的變量元素的規(guī)則是先按照我們上面講的對(duì)象遍歷規(guī)則去變量對(duì)象本身，接下來(lái)再按照此規(guī)則去遍歷對(duì)象的原型，以此類(lèi)推，直到遍歷到頂部。

除了最后一個(gè) for...in 的注意點(diǎn)之外，就沒(méi)有其他的了，其實(shí)內(nèi)容比較少。

到此這篇關(guān)于詳解JS對(duì)象遍歷的順序問(wèn)題的文章就介紹到這了,更多相關(guān)JS對(duì)象遍歷順序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: