JS利用for...in结合排序实现对象Key与Value有序提取

JavaScript对象遍历的无序性问题

在JavaScript开发中，若需遍历对象并将键值对分别提取至两个数组，通常使用for...in语句。然而，标准规范中对象属性的枚举顺序并不保证与定义顺序一致，导致直接遍历时获取的属性和值排列可能是无序的。

为了解决这一问题，核心目标是在遍历过程中，严格按照特定顺序提取对象中的Key和Value值。

具体实现效果如下所示。

假设后端接口返回的对象格式如下：

期望将其转换为有序的Key数组和Value数组，格式如下：

有序提取Key与Value的实现代码

具体的实现代码如下：

//按序输出数据
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])
})

实现原理与步骤解析

该实现的核心思路是：首先利用for...in循环遍历原对象，提取所有属性名（Key）并存入一个数组；接着对该Key数组进行排序操作；最后，遍历排序后的Key数组，根据每个Key在原对象中查找对应的Value值，并将结果分别存入新的Key数组和Value数组中。

以上即为利用for...in结合排序实现对象数据有序提取的完整方案，希望能为相关开发工作提供参考。