按name字段对对象数组排序失败,求正确实现方案
问题原因及解决办法
你的排序代码失效的核心问题是:用数值减法-比较字符串。字符串之间用减号运算会返回NaN,而sort函数无法基于NaN进行正确的排序逻辑判断。
正确的字符串排序写法
1. 使用localeCompare(推荐,支持多语言)
localeCompare是专门用于字符串比较的方法,会根据字符串的自然排序规则返回负数、0或正数,完美适配sort的回调要求:
[...res.data.category].sort((a, b) => { return a.name.localeCompare(b.name); })
执行后你的数组会按name字段升序排列(Electronics → Mobiles)。
2. 手动字符编码比较
如果不需要多语言支持,也可以通过直接比较字符串的Unicode码点来实现:
[...res.data.category].sort((a, b) => { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; })
3. 不区分大小写排序
如果需要忽略大小写进行排序,可先将字符串转为统一大小写后再比较:
[...res.data.category].sort((a, b) => { return a.name.toLowerCase().localeCompare(b.name.toLowerCase()); })
补充说明
你使用扩展运算符[...res.data.category]创建原数组副本的做法是正确的,避免了sort修改原数组的问题,这部分不需要调整。
内容的提问来源于stack exchange,提问作者Abdullah Asif
相关产品推荐
相关产品推荐

