Chrome 69执行JS排序代码报Unexpected token .错误的原因与修复方案

错误原因 #

这个语法错误的根源很明确——你用的**可选链操作符（?.）**在Chrome 69里完全不支持！

可选链是ES2020才加入的新语法，而Chrome 69是2018年的旧版本，根本没兼容这个特性。浏览器遇到它认不出的?.符号，直接就抛出Unexpected token .的语法错误了，这也是为什么你在高版本Chrome和Firefox里运行正常，旧版本就崩了。

修复方案 #

我们只需要把可选链替换成旧浏览器能识别的传统写法就行，这里给你两种靠谱的实现：

方案1：精准处理属性不存在的情况 #

这种写法逻辑清晰，能精准控制undefined/null值的排序行为，适合对排序结果要求严格的场景：

const sortName = name => (a, b) => {
  // 单独判断属性是否存在，避免把0、false等假值误处理
  const valueA = a[name] != null ? a[name] : '';
  const valueB = b[name] != null ? b[name] : '';
  return valueA.localeCompare(valueB);
};
data.sort(sortName('name'));

方案2：用短路求值简化代码 #

如果你追求代码简洁，且数据里没有需要保留的0、false等假值，用逻辑或（||）的短路特性也能快速解决问题：

const sortName = name => (a, b) => 
  (a[name] || '').localeCompare(b[name] || '');
data.sort(sortName('name'));

额外说明 #

修改后，原本可选链会返回undefined的场景（属性不存在），现在会用空字符串替代参与排序，既能避免报错，也能让排序结果保持稳定——所有没有目标属性的项会被排到字符串排序的固定位置（具体取决于语言环境），和高版本浏览器的预期行为基本一致。

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