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

問題描述

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

當(dāng)對象變?yōu)閺?fù)雜對象時(shí)，輸出的key就變得復(fù)雜

解決方案

//循環(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ū)ο蟮膶傩悦倮肁rray原型上的sort方法對獲取的屬性名進(jìn)行排序，newkey是一個(gè)數(shù)組
	var newObj = {};//創(chuàng)建一個(gè)新的對象，用于存放排好序的鍵值對
	for (var i = 0; i < newkey.length; i++) {//遍歷newkey數(shù)組
	    newObj[newkey[i]] = obj[newkey[i]];//向新創(chuàng)建的對象中按照排好的順序依次增加鍵值對
	}
	return newObj;//返回排好序的新對象
}

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

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

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

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

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

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

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

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

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

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)的方法也存在相同的問題，可以使用類似的方法進(jìn)行修改

下面主要說的是 for…in

循環(huán)對象時(shí)，順序?yàn)槭裁磿y？

1.這本身就是一個(gè)ECMA的一個(gè)規(guī)范，數(shù)字按升序輸出，字符串按創(chuàng)建順序輸出，并且數(shù)字優(yōu)先級高于字符串
2.JS本身是不能被計(jì)算機(jī)識別，需要通過V8轉(zhuǎn)化為字節(jié)碼
3.那么針對ECMA的一個(gè)規(guī)范，v8對這個(gè)規(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í)候的順序遍歷出來。

整數(shù)屬性

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

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

例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://m.fzitv.net/javascript/304306x8c.htm

總結(jié)

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

最新評論