JavaScript数组调用map()方法后返回结果的顺序是否会发生变化？含同步与异步API调用场景

好问题！咱们分两种场景来详细拆解：

1. 同步回调的情况（你的第一个示例） #

当map()的回调是同步函数时，返回的新数组顺序绝对和原数组一致，不会有任何意外。

map()的核心工作机制就是严格按照原数组的索引顺序（从0到最后一个元素）依次遍历处理每个元素，把每次回调的返回值按遍历顺序存入新数组。拿你的示例代码来说：

const array = [1,2,3,4,5,6,7,8,9];
const mappedArray = array.map((num) => { return num * num; })
console.log(mappedArray); // 必然是 [1,4,9,16,25,36,49,64,81]

不管运行多少次，mappedArray的元素顺序都和原数组一一对应，每个位置的元素就是原数组对应位置元素的平方，完全不会出现顺序错乱的情况。

2. 异步回调的情况（包含远程API调用） #

这种情况要区分两个关键点：

• map()返回的数组本身的顺序：依然和原数组完全一致。因为map()还是按原数组顺序遍历，每个异步回调（async函数）会被依次调用，返回的Promise会按遍历顺序存入新数组。比如你的代码：

  const mappedArray = array.map(async (num) => { return await api(num); })
  

  mappedArray的结构是[Promise<api(1)>, Promise<api(2)>, Promise<api(3)>, ...]，每个Promise的位置严格对应原数组的元素位置。

• Promise的resolve顺序（即API返回结果的时间）：这个可能不一致。因为远程API的响应速度是不确定的，比如api(2)可能比api(1)先返回，但这并不影响mappedArray里Promise的位置。

如果需要得到按原数组顺序排列的API结果，只需要用Promise.all()来等待所有Promise完成：

const results = await Promise.all(mappedArray);
// results的顺序必然和原数组一致，不管每个API的响应快慢

Promise.all()会按照输入的Promise数组的顺序，把每个Promise的resolve结果对应存入返回的数组，所以最终拿到的结果顺序还是和原数组一一对应的。

总结一下：

• 同步map：返回数组顺序100%和原数组一致；
• 异步map：返回的Promise数组顺序和原数组一致，通过Promise.all()得到的最终结果顺序也和原数组一致，只是单个Promise的完成时间可能有先后。

内容的提问来源于stack exchange，提问作者Liu Hantao