如何根据指定数组的顺序对JavaScript数组进行排序

给定两个数组：

let productKeys = [ "aff_link", "availability", "brand", "date_add", "date_upd", "description", "image_link", "link", "price", "product_type", "title" ];

let preDefinedHeader = ['image_link', 'title', 'price', 'brand', 'link'];

需求：对productKeys数组排序，将**preDefinedHeader中存在的元素**按preDefinedHeader的顺序排在前面，剩余元素放在后面，最终输出如下：

['image_link', 'title', 'price', 'brand', 'link', 'aff_link', 'availability', 'description', 'date_add', 'date_upd', 'product_type'];

解决方案 #

可以通过sort方法结合元素在前置列表中的索引值实现需求，以下提供两种实现方式：

基础实现（适合小数据量） #

let productKeys = [ "aff_link", "availability", "brand", "date_add", "date_upd", "description", "image_link", "link", "price", "product_type", "title" ];
let preDefinedHeader = ['image_link', 'title', 'price', 'brand', 'link'];

productKeys.sort((a, b) => {
  const indexA = preDefinedHeader.indexOf(a);
  const indexB = preDefinedHeader.indexOf(b);

  // 两个元素都在前置列表中，按索引顺序排列
  if (indexA !== -1 && indexB !== -1) {
    return indexA - indexB;
  }
  // 只有a在前置列表，a排前面
  if (indexA !== -1) {
    return -1;
  }
  // 只有b在前置列表，b排前面
  if (indexB !== -1) {
    return 1;
  }
  // 都不在前置列表，按字典序排序（也可保留原顺序）
  return a.localeCompare(b);
});

console.log(productKeys);

高效实现（适合大数据量） #

如果数组元素较多，频繁使用indexOf会影响性能，可先将前置列表转为映射表优化查询效率：

let productKeys = [ "aff_link", "availability", "brand", "date_add", "date_upd", "description", "image_link", "link", "price", "product_type", "title" ];
let preDefinedHeader = ['image_link', 'title', 'price', 'brand', 'link'];

// 构建索引映射表，将前置元素与其索引绑定
const headerMap = new Map();
preDefinedHeader.forEach((key, index) => {
  headerMap.set(key, index);
});

productKeys.sort((a, b) => {
  // 不在映射表中的元素，用Infinity让它们排在后面
  const indexA = headerMap.get(a) ?? Infinity;
  const indexB = headerMap.get(b) ?? Infinity;
  return indexA - indexB;
});

console.log(productKeys);

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