for循环中调用接口获取对象放到数组中，每次数组中对象的顺序都不一致

DongDong.1

于 2022-05-20 14:54:19 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_37150922/article/details/124883256

本文介绍了在JavaScript中使用for循环和map遍历数据时，因异步调用接口获取数据导致数组内对象顺序不一致的常见问题。为了解决这个问题，作者采用了先在数组中占位，然后通过splice方法更新对应位置数据的方法，确保了数组内对象顺序的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：
for循环中调用接口获取对象放到数组中，每次数组中对象的顺序都不一致
最开始打代码如下：

const dataSetList = data.setCodes.split("|");
const allDataSet = this.allDataSet
dataSetList.map((item,i) => {
  allDataSet.map(setData => {
    if(item === setData.code){
      this.detail(setData.id)
    }
  })
})

async detail(id,index) {
	const { code, data } = await api.detail(id);
	if (code == 200) {
	  this.dataSet.push(data)
	}
},

this.dataSet里面的数据每次顺序都不一致
解决：
遍历数据时满足条件先push一个对象，调用接口获取到数据后通过splice修改对应index 的值

const dataSetList = data.setCodes.split("|");
const allDataSet = this.allDataSet
 dataSetList.map((item,i) => {
   allDataSet.map(setData => {
     if(item === setData.code){
       this.dataSet.push({})//先push一个对象
       this.detail(setData.id,i)
     }
   })
 })

async detail(id,index) {
	const { code, data } = await api.detail(id);
	if (code == 200) {
	 	this.dataSet.splice(index, 1,data)
	}
},