如何按自定义固定顺序对JavaScript对象数组排序并遍历？

嘿，你的问题出在用减法比较字符串上啦！a.place - b.place这种写法只适用于数字类型的比较，字符串做减法会得到NaN，排序函数拿到NaN根本没法正确判断顺序，自然达不到你想要的效果。

下面给你一套灵活可控的实现方案，完全满足你指定顺序排序的需求，而且后续修改排序规则也超方便：

第一步：定义自定义排序优先级 #

先把你想要的排序顺序做成一个数组，这样我们可以通过元素的索引来判断谁在前谁在后：

// 按你要求的顺序：san jose → new york → chicago → new jersey
const customPlaceOrder = ["san jose", "new york", "chicago", "new jersey"];

第二步：用正确的逻辑排序数组 #

在sort方法里，我们通过indexOf获取每个元素的place在自定义顺序数组里的位置，然后比较这两个位置的数值——这才是字符串类型自定义排序的正确打开方式：

var details = [
  { "name": "john", "place":"new york" },
  { "name": "mark", "place":"chicago" },
  { "name": "tom", "place":"san jose" },
  { "name": "dansk", "place":"new jersey" }
];

const customPlaceOrder = ["san jose", "new york", "chicago", "new jersey"];

// 执行排序
const sortedDetails = details.sort((a, b) => {
  const aIndex = customPlaceOrder.indexOf(a.place);
  const bIndex = customPlaceOrder.indexOf(b.place);
  // 索引小的排在前面，返回差值即可
  return aIndex - bIndex;
});

第三步：遍历展示（React场景） #

如果是在React里渲染这些数据，直接遍历排序后的数组就行，记得给每个元素加唯一的key：

{sortedDetails.map((item, idx) => (
  <div key={idx} className="item-card">
    <p>姓名：{item.name}</p>
    <p>地点：{item.place}</p>
  </div>
))}

可选优化：提升大数组排序效率 #

如果你的数据量很大，indexOf每次都会遍历整个顺序数组，效率有点低。可以把顺序数组转成键值对对象，这样查找索引的速度会快很多：

// 用对象存储每个地点对应的排序优先级
const customOrderMap = {
  "san jose": 0,
  "new york": 1,
  "chicago": 2,
  "new jersey": 3
};

const sortedDetails = details.sort((a, b) => {
  return customOrderMap[a.place] - customOrderMap[b.place];
});

以后要修改排序规则的话，只需要调整customPlaceOrder数组或者customOrderMap对象的顺序就好，完全不用改动排序函数的逻辑，非常灵活！

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