JavaScript如何使用另一数组取值对二维数组按第一列进行排序

原始需求 #

我有一个二维数组：

var array1 = [
  ["Jasper", "Diesel", "Grid", 2.7],
  ["Delta", "Solar", "Grid", 10],
  ["Alpha", "Wind", "Grid", 20]
]

需要使用如下定义的sortingArray作为优先级，对array1按第一列的字符串值排序：

// 原代码存在笔误，已补全Delta后的闭合双引号
var sortingArray = ["Alpha","Jasper","Delta"]

预期的排序结果如下：

var sortedArray = [
  ["Alpha", "Wind", "Grid", 20],    
  ["Jasper", "Diesel", "Grid", 2.7],
  ["Delta", "Solar", "Grid", 10]
]

问题排查 #

最开始写的排序代码没有生效，数组完全没有变化：

array1.sort(function (a, b) {  
  return sortingArray.indexOf(a) - sortingArray.indexOf(b);
})

失效原因 #

上述代码直接将二维数组的整行子数组a、b传入indexOf查询位置，而sortingArray中存储的都是字符串，没有匹配的数组元素，所有比较的返回值都是0，等于告诉排序函数两个元素优先级相同，自然不会改变原有数组顺序。

解决方案 #

确实需要指定取子数组的第一列（下标为0的元素）参与排序比对，修正后的代码如下：

// 原代码存在语法笔误，已将a[0)、b[0)修正为a[0]、b[0]
array1.sort(function (a, b) {  
  return sortingArray.indexOf(a[0]) - sortingArray.indexOf(b[0]);
})

性能优化方案 #

如果待排序数组或者排序规则数组的长度比较大，推荐提前把排序优先级存到Map里，避免每次排序比对都遍历数组查索引，运行效率更高：

const sortPriority = new Map(sortingArray.map((val, index) => [val, index]))
array1.sort((a, b) => sortPriority.get(a[0]) - sortPriority.get(b[0]))

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