可能有些同學聽過在 JavaScript 中遍歷對象順序不固定的這一說法。事實上，這個說法不是特別準確。

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

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

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

const obj = {}

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

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

我們最后的遍歷順序完全忽視了插入順序，并且，值得我們注意的是，在對象中，就算我們添加屬性時的索引值是 Number 類型，最后的結果還是會被隱式的轉為字符串。

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

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"]

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

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

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

相信到這里，大家已經完全明白了對象的遍歷順序問題，最后還有一點值得大家注意的點，是 for...in 的遍歷順序問題。

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

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

除了最后一個 for...in 的注意點之外，就沒有其他的了，其實內容比較少。

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

最新評論