JS使用for in有序獲取對象數(shù)據(jù)

更新時間：2020年05月19日 09:23:32 作者：蘇小落

這篇文章主要介紹了JS使用for in有序獲取對象數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

需要遍歷對象，將key value分為兩個數(shù)組，可以使用forin，但是獲取到的對象中的屬性及屬性值排列是無序的，

目的是要按順序取出對象中的key和value值。

實(shí)現(xiàn)效果：

比如接口返回的對象格式：

需要轉(zhuǎn)換的格式：

實(shí)現(xiàn)代碼：

//按序輸出數(shù)據(jù)
for(let i in res.data.allMap){
 this.mapTime.push(i);
}
this.mapTime.sort();
this.mapTime.map((item) => {
 this.mapValue.push(res.data.allMap[item])
})

實(shí)現(xiàn)思想：

還是先使用forin取出對象中的所有屬性key，然后對該數(shù)組排序，再去原數(shù)組中匹配key值獲取到對應(yīng)的value值存放到另一個數(shù)組中即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何利用js給自己照相并修圖
在一些瀏覽器里已經(jīng)可以使用web api調(diào)用攝像頭功能了,下面這篇文章主要給大家介紹了關(guān)于如何利用js給自己照相并修圖的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
JS實(shí)現(xiàn)仿Windows7風(fēng)格的網(wǎng)頁右鍵菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿Windows7風(fēng)格的網(wǎng)頁右鍵菜單效果代碼,涉及JavaScript鼠標(biāo)右鍵響應(yīng)及動態(tài)生成頁面菜單的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
javascript作用域鏈與執(zhí)行環(huán)境詳解
這篇文章主要為大家詳細(xì)介紹了javascript作用域鏈與執(zhí)行環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript分頁組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript分頁組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
javascript sort()對數(shù)組中的元素進(jìn)行排序詳解
在本篇文章里小編給大家整理是一篇關(guān)于javascript sort()對數(shù)組中的元素進(jìn)行排序的相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-10-10
JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
關(guān)于webpack代碼拆分的解析
本篇文章主要介紹了關(guān)于webpack代碼拆分的解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
javascript實(shí)現(xiàn)發(fā)送短信倒計時
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
node在兩個div之間移動,用ztree實(shí)現(xiàn)
本文介紹了“node在兩個div之間移動,用ztree實(shí)現(xiàn)”的方法，需要的朋友可以參考一下
2013-03-03
能說明你的Javascript技術(shù)很爛的五個原因分析
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言
2011-10-10