如何在JavaScript中按数组对象的presence字段排序（在线用户优先）

你现在的排序逻辑搞反啦，我们来一步步理清楚问题，然后给出正确的实现。

首先明确核心需求：把所有presence为online的对象放在数组前面，offline的放在后面。

你的代码问题所在 #

你写的排序回调逻辑存在方向错误，而且覆盖的场景不全面：

const newArray = objs.sort((a, b) => { 
  if (a.presence === 'online') { 
    return 1; 
  } else if (b.presence === 'offline') { 
    return -1; 
  } else { 
    return 0; 
  } 
})

当a是online时返回1，这会告诉sort方法「a应该排在b后面」——完全和我们想要的顺序相反！同时第二个条件也没覆盖到a是offline、b是online的关键场景。

两种正确的实现方式 #

方式一：明确对比所有场景（直观易懂）

直接在回调里处理a和b的四种组合情况，逻辑清晰：

const objs = [ 
  { id: 'X82ns', name: 'james', presence: 'online' }, 
  { id: '8YSHJ', name: 'mary', presence: 'offline' }, 
  { id: '7XHSK', name: 'rene', presence: 'online' } 
];

// 先复制原数组，避免sort原地修改原数组（不需要保留原数组可省略这一步）
const sortedObjs = [...objs].sort((a, b) => {
  // a是online、b是offline：a排前面，返回-1
  if (a.presence === 'online' && b.presence === 'offline') {
    return -1;
  }
  // a是offline、b是online：a排后面，返回1
  if (a.presence === 'offline' && b.presence === 'online') {
    return 1;
  }
  // 其余情况（两者同状态）：保持原有相对顺序
  return 0;
});

console.log(sortedObjs);

方式二：给状态赋值权重（简洁易扩展）

给不同的presence状态分配数字权重，用权重差来排序，后续新增状态（比如away）时只需扩展权重映射即可：

const objs = [ 
  { id: 'X82ns', name: 'james', presence: 'online' }, 
  { id: '8YSHJ', name: 'mary', presence: 'offline' }, 
  { id: '7XHSK', name: 'rene', presence: 'online' } 
];

// 权重越小，排序越靠前
const statusWeight = { online: 0, offline: 1 };
const sortedObjs = [...objs].sort((a, b) => {
  return statusWeight[a.presence] - statusWeight[b.presence];
});

console.log(sortedObjs);

最终验证结果 #

两种方式都会得到你预期的排序结果：

[ 
  { id: 'X82ns', name: 'james', presence: 'online' }, 
  { id: '7XHSK', name: 'rene', presence: 'online' }, 
  { id: '8YSHJ', name: 'mary', presence: 'offline' } 
]

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