快捷導(dǎo)航

JS?for?in遍歷對(duì)象順序不對(duì)解決辦法

更新時(shí)間：2023年11月09日 10:21:28 作者：Mr-K

最近使用for-in語句遍歷對(duì)象屬性時(shí)發(fā)現(xiàn)遍歷順序并非屬性構(gòu)建順序,這篇文章主要給大家介紹了關(guān)于JS?for?in遍歷對(duì)象順序不對(duì)的解決辦法,需要的朋友可以參考下

后臺(tái)返回對(duì)象參數(shù)展開后如下

當(dāng)通過 for in 循環(huán)存放到數(shù)組的時(shí)候得到了

很顯然順序跟想象的不一樣，因?yàn)閷?duì)象中沒有順序，他不是數(shù)組，所以想要得到一個(gè)順序就首先要只給對(duì)象指定規(guī)則，這里是通過對(duì)象的value的字母來指定的規(guī)則

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

結(jié)果如下

附：JavaScript for...in 循環(huán)出來的對(duì)象屬性順序到底是什么規(guī)律？

簡單歸結(jié)成一句話就是：先遍歷出整數(shù)屬性（integer properties，按照升序），然后其他屬性按照創(chuàng)建時(shí)候的順序遍歷出來。

我們來看一個(gè)例子：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

最終遍歷出來的結(jié)果是：屬性 1 先遍歷出來， 49 最后遍歷出來。

這里的 1、41、44 和 49 就是整數(shù)屬性。

那什么是整數(shù)屬性呢？我們可以用下面的比較結(jié)果說明：

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

上面的例子中，如果想按照創(chuàng)建順序循環(huán)出來，可以用一個(gè) 討巧的方法：

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for(let code in codes) {
  console.log( +code ); // 49, 41, 44, 1
}

總結(jié)

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

您可能感興趣的文章: