根据更新后的索引数组重排JS数组调整Leaflet路径点顺序

问题场景 #

现有三个数组，分别是原顺序索引数组、存储路径点坐标的待重排数组、调整顺序后的新索引数组，需要按照新索引数组的元素顺序，对应重排坐标数组，最终用于调用Leaflet Routing Machine的L.routing.machine.spliceWaypoints()方法完成路径点更新。

初始数组定义 #

// 原顺序索引数组
originalData = ['data1', 'data2', 'data3']

// 待重排的路径点位置数组
originalPos = ['50 a', '80 b', '31 c']

// 调整顺序后的新索引数组
newData = ['data1', 'data3', 'data2']

预期输出 #

重排后的路径点位置数组需要和新索引数组的元素一一对应，结果如下：

originalPos = ['50 a', '31 c', '80 b']

实现方案 #

• 方案1：Map映射实现（推荐，数据量大时性能更好）
  先建立原索引值和对应位置的映射关系，再遍历新索引数组按顺序取值，只要原索引数组的元素唯一（路径点数据天然满足该要求），就不会出现匹配错误。

// 构建索引值 -> 位置的映射
const positionMap = new Map()
originalData.forEach((dataKey, idx) => {
  positionMap.set(dataKey, originalPos[idx])
})
// 按新索引顺序生成重排后的位置数组
const sortedPositions = newData.map(dataKey => positionMap.get(dataKey))

// 后续直接把sortedPositions传入spliceWaypoints方法即可完成路径点调整

• 方案2：indexOf直接查找实现（写法简洁，适合数据量小的场景）
  不需要额外构建映射，直接通过元素在原索引数组的下标取对应位置即可：

const sortedPositions = newData.map(dataKey => {
  return originalPos[originalData.indexOf(dataKey)]
})

注意：如果原索引数组存在重复元素，两种方案都会出现匹配偏差，使用前请确认索引数组的元素唯一性。

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