TypeScript排序对象数组时null参数引发localeCompare报错解决方法

问题场景 #

• 运行环境：Angular CLI 7.2.3、Angular 7.2.2
• 实现目标：对存储用户信息的对象数组，按照first_name属性做本地化排序

初始实现代码如下：

users.users.sort((a, b) => 
a.first_name.localeCompare(b.first_name, 'en', {'sensitivity': 'base'}))

当数组中部分对象的first_name属性值为null时，运行上述代码会抛出错误：

Cannot read properties of null (reading 'localeCompare')

报错原因 #

localeCompare是字符串原型上的方法，null值本身不存在该方法，直接在null上调用就会触发类型错误。

修复方案 #

在排序比较逻辑前增加空值校验，将null值统一视为空字符串""处理，完全保留原有排序规则，修复后代码如下：

users.users.sort((a, b) => {
  // 空值兜底，null/undefined统一转为空字符串
  const firstNameA = a.first_name ?? ''
  const firstNameB = b.first_name ?? ''
  return firstNameA.localeCompare(firstNameB, 'en', { 'sensitivity': 'base' })
})

如果项目构建配置不支持空值合并运算符??，可以替换为兼容写法：

users.users.sort((a, b) => {
  const firstNameA = a.first_name == null ? '' : a.first_name
  const firstNameB = b.first_name == null ? '' : b.first_name
  return firstNameA.localeCompare(firstNameB, 'en', { 'sensitivity': 'base' })
})

两种写法都不会改变原有的排序规则，同时彻底解决空值引发的报错。

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