如何按user.image属性值对JavaScript对象数组进行排序

你可以直接使用JavaScript内置的Array.sort()方法，自定义比较逻辑即可实现需求，下面给出两种常用的排序实现：

方案1：有image值的教师排在前，image为null的排在后 #

const sortedTeachers = teachers.sort((a, b) => {
  // 非null权重设为0，null权重设为1，权重小的排前面
  const weightA = a.user.image === null ? 1 : 0;
  const weightB = b.user.image === null ? 1 : 0;
  return weightA - weightB;
});

如果需要同类型（都有image/都为null）的教师再按id升序排序，可以调整逻辑：

const sortedTeachers = teachers.sort((a, b) => {
  const weightA = a.user.image === null ? 1 : 0;
  const weightB = b.user.image === null ? 1 : 0;
  // 优先按image状态排序，状态相同按教师id升序
  if (weightA !== weightB) {
    return weightA - weightB;
  }
  return a.id - b.id;
});

方案2：image为null的教师排在前，有image值的排在后 #

仅需要调整权重赋值即可：

const sortedTeachers = teachers.sort((a, b) => {
  const weightA = a.user.image === null ? 0 : 1;
  const weightB = b.user.image === null ? 0 : 1;
  return weightA - weightB;
});

实现原理 #

Array.sort()的比较函数返回负数时，参数a会排在b前面；返回正数时b排在a前面；返回0则保持二者原有相对顺序。我们通过给不同image状态的对象设置不同权重，即可快速实现分类排序。

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