后臺返回對象參數(shù)展開后如下

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

很顯然順序跟想象的不一樣，因為對象中沒有順序，他不是數(shù)組，所以想要得到一個順序就首先要只給對象指定規(guī)則，這里是通過對象的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方法對獲取的屬性名進行排序，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;//返回排好序的新對象
}

結(jié)果如下

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

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

我們來看一個例子：

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

當上面的判斷結(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"。

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

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遍歷對象順序不對解決辦法的文章就介紹到這了,更多相關(guān)JS for in遍歷對象順序不對內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論