React两段列表排序代码逻辑求解：sort规则、三目运算相关疑问

1. 第一段代码相关逻辑说明 #

1.1 sortCount < 3对应的排序逻辑 #

首先看状态counter的更新规则：

• 初始值为0，每次触发sortPeople函数时，会先判断当前sortCount（即counter的当前值）：
  • 如果等于2，就重置为1
  • 如果小于2，就加1
    所以sortCount的取值永远只有1、2两种可能，天然满足sortCount < 3的条件，这个判断属于冗余代码，不会影响逻辑，排序逻辑每次触发函数都会执行。
    这段代码的整体功能是点击切换人员列表按eaten字段的正序/倒序排列：第一次点击把eaten值为No（未就餐）的人排在最前面，第二次点击把eaten值为Yes（已就餐）的人排在最前面，循环切换。

1.2 三目运算符返回0、-1、1的含义 #

这是JavaScript内置Array.sort()方法的固定比较规则：比较函数接收两个待排序元素x和y，返回值决定二者的排列顺序：

• 返回负数：x排在y前面
• 返回正数：y排在x前面
• 返回0：x和y的相对顺序保持不变
  对应到代码里的逻辑：
• 当sortCount === 1时：
  • 如果x.eaten和y.eaten相等，返回0，顺序不变
  • 如果x.eaten为No，返回-1，x排前面，最终所有eaten=No的排在列表前半段
• 当sortCount === 2时：
  • 如果x.eaten和y.eaten相等，返回0，顺序不变
  • 如果x.eaten为No，返回1，y排前面，最终所有eaten=Yes的排在列表前半段

2. 第二段代码排序规则说明 #

还是基于Array.sort()的比较规则，数值型字段可以直接通过减法简化比较逻辑：

• x.number - y.number：
  如果x.number小于y.number，返回负数，x排在前面，最终列表按number字段从小到大升序排列，例如顺序为1、2、3、4。
• y.number - x.number：
  如果y.number小于x.number，返回负数，y排在前面，最终列表按number字段从大到小降序排列，例如顺序为4、3、2、1。
  这段代码的功能是点击切换客户列表按number字段的升序/降序循环排列。

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