解決循環(huán)復雜對象，key值順序混亂

問題描述

當循環(huán)純數(shù)字索引對象時，循環(huán)key值是正確的

當對象變?yōu)閺碗s對象時，輸出的key就變得復雜

解決方案

//循環(huán)中使用
for(let item in this.objectOrder(data)){
	this.objArr.push(item)
}
 
//方法
objectOrder(obj) {//排序的函數(shù)
	var newkey = Object.keys(obj).sort(); //先用Object內(nèi)置類的keys方法獲取要排序?qū)ο蟮膶傩悦?，再利用Array原型上的sort方法對獲取的屬性名進行排序，newkey是一個數(shù)組
	var newObj = {};//創(chuàng)建一個新的對象，用于存放排好序的鍵值對
	for (var i = 0; i < newkey.length; i++) {//遍歷newkey數(shù)組
	    newObj[newkey[i]] = obj[newkey[i]];//向新創(chuàng)建的對象中按照排好的順序依次增加鍵值對
	}
	return newObj;//返回排好序的新對象
}

循環(huán)對象時，輸出key值順序混亂原因

ES6之前，循環(huán)對象常見做法是使用：for…in。但是for…in循環(huán)的問題在于它會遍歷原型鏈中的屬性，所以需要使用hasOwnProperty執(zhí)行檢查屬性是否屬于該對象。

ES6之后，我們對于對象的循環(huán)有了更好的辦法：

Object.keys(創(chuàng)建一個包含對象所有屬性的數(shù)組),

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var keys = Object.keys(fruits);
console.log(keys);  //["appple", "pear", "orange"]

Object.values（創(chuàng)建一個數(shù)組，其中包含對象中每個屬性的值）,

const fruits ={
    appple:22,
    pear:34,
    orange:88
}

var values =Object.values(fruits);
console.log(values); //[22, 34, 88]

Object.entries（創(chuàng)建了一個二維數(shù)組，每個內(nèi)部數(shù)組都有2個元素，第一個元素是屬性名，第二個屬性值）

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var entries = Object.entries(fruits);
console.log(entries);
// [['appple',22],['pear',34],['orange',88]]

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
for (const [fruit,num] of entries) {
    console.log(`we have ${num} ${fruit}`);  //we have 22 appple ...
}

Object對應(yīng)的方法也存在相同的問題，可以使用類似的方法進行修改

下面主要說的是 for…in

循環(huán)對象時，順序為什么會亂？

1.這本身就是一個ECMA的一個規(guī)范，數(shù)字按升序輸出，字符串按創(chuàng)建順序輸出，并且數(shù)字優(yōu)先級高于字符串
2.JS本身是不能被計算機識別，需要通過V8轉(zhuǎn)化為字節(jié)碼
3.那么針對ECMA的一個規(guī)范，v8對這個規(guī)范做的優(yōu)化策略
4.排序?qū)傩?elements，用來存儲數(shù)字。 常規(guī)屬性 properties 用來存儲字符串。為了優(yōu)化，引入對象內(nèi)屬性
5.對象屬性多后，會采用慢屬性來存儲數(shù)據(jù)，快屬性就是采用線性數(shù)據(jù)結(jié)構(gòu)，慢屬性就是采用非線性結(jié)構(gòu)，比如字典來存儲數(shù)據(jù)。

1. 先遍歷出整數(shù)屬性（integer properties，按照升序），然后其他屬性按照創(chuàng)建時候的順序遍歷出來。

整數(shù)屬性

String(Math.trunc(Number(prop)) === prop

當上面的判斷結(jié)果為 true，prop 就是整數(shù)屬性，否則不是。

例：

"49" 是整數(shù)屬性，因為 String(Math.trunc(Number('49')) 的結(jié)果還是 "49"。
"+49" 不是整數(shù)屬性，因為 String(Math.trunc(Number('+49')) 的結(jié)果是 "49"，不是 "+49"。
"1.2" 不是整數(shù)屬性，因為 String(Math.trunc(Number('1.2')) 的結(jié)果是 "1"，不是 "1.2"。

「數(shù)字屬性應(yīng)該按照索引值??升序排列，字符串屬性根據(jù)創(chuàng)建時的順序升序排列。并且數(shù)字屬性優(yōu)先于字符串」

2. 首先JS代碼本身是不會直接被計算機執(zhí)行，計算機只能接收二進制的匯編代碼，所以，中間需要一層轉(zhuǎn)化，而這個轉(zhuǎn)化，在chrom就是v8引擎

在v8 里是怎么樣存儲和讀取對象屬性的呢，

1. 在v8里，將對象里的屬性，分為兩大類。數(shù)字類型，叫排序?qū)傩?在v8里叫elements。字符串類型，叫常規(guī)屬性，在v8里叫properties。
在v8里，為了有效的存儲和訪問這對象屬性，分別使用兩個線性結(jié)構(gòu)來保存這兩個屬性。

2. 在elements對象中，會按照順序存放排序?qū)傩?，properties屬性則指向了properties對 象，在properties對象中，會按照創(chuàng)建時的順序保存了常規(guī)屬性。

3. 但是這樣也存在一個問題，在查找排序?qū)傩詴r，直接通過索引即可。但是對象，需要找到properties，然后找到propteries里的屬性，這樣無疑多了一層操作，所以引入了一個新名詞 對象內(nèi)屬性( in- object properties)

4. 但是常規(guī)屬性也有個數(shù)限制，超過是個，默認是10個，就要開辟新的空間來保存常規(guī)屬性

針對數(shù)量少的對象屬性，采用以上策略完全沒有問題，但是對象數(shù)量多了以后，會采用排序非線性字典結(jié)構(gòu)來存儲

• 線性結(jié)構(gòu)：是一個有序數(shù)據(jù)元素的集合。常見線性結(jié)構(gòu)， 線性表，棧，隊列，雙隊列，串(一維數(shù)組)
• 非線性結(jié)構(gòu): 其邏輯特征是一個結(jié)點元素可能有多個直接前驅(qū)和多個直接后繼。

那這個時候，通過線性結(jié)構(gòu)來存儲數(shù)據(jù)，查找肯定的快的，但是如果涉及到大量的修改數(shù)據(jù)，那么動一發(fā)而牽全身，是非常耗性能的，所以數(shù)據(jù)多了，v8采用了慢排序

• 快排序： 采用線性結(jié)構(gòu)
• 慢排序：采用非線性結(jié)構(gòu) ，比如字典

3. 同時與瀏覽器有關(guān)系，Chrome跟IE是不一樣的，所以給出以下結(jié)論：

Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版規(guī)范。因此，使用 for-in 語句遍歷對象屬性時遍歷書序并非屬性構(gòu)建順序。
而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是較老的 ECMA-262 第三版規(guī)范，屬性遍歷順序由屬性構(gòu)建的順序決定。

Chrome Opera 中使用 for-in 語句遍歷對象屬性時會遵循一個規(guī)律：
它們會先提取所有 key 的 parseFloat 值為非負整數(shù)的屬性，然后根據(jù)數(shù)字順序?qū)傩耘判蚴紫缺闅v出來，然后按照對象定義的順序遍歷余下的所有屬性。

http://www.dhdzp.com/javascript/304306x8c.htm

總結(jié)

到此這篇關(guān)于js中for...in循環(huán)對象時輸出key值順序混亂問題解決的文章就介紹到這了,更多相關(guān)js for...in循環(huán)輸出key值順序混亂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！