如何在map函数中使用sort函数实现文件名升序排列

你只需要在调用map遍历之前，先对allFileVersions数组按照FileName字段做升序排序即可。注意JS的sort是原地排序方法，会直接修改原数组，最好先做一层浅拷贝再排序，避免引发不可预期的副作用。

完整实现代码 #

{
  // 先浅拷贝数组再排序，不修改原数组
  [...allFileVersions].sort((a, b) => {
    // 用localeCompare做字符串对比，对中文、特殊字符、大小写的兼容性比直接比较运算符更好
    return a.FileName.localeCompare(b.FileName)
  }).map((eachVersion) => {
    return (
      <div className="d-flex">
        <div className="">version:</div>
        <div className="">{eachVersion.FileName}</div>
      </div>
    );
  })    
}

补充说明 #

• 若要改为降序排序，只需调换比较函数中a、b的位置：return b.FileName.localeCompare(a.FileName)
• 若文件名包含数字需要按自然顺序排序（例如version2排在version10前面），可给localeCompare增加配置项：
  a.FileName.localeCompare(b.FileName, undefined, { numeric: true })
• 若明确不需要保留原数组顺序，也可以省略浅拷贝步骤，直接对allFileVersions调用sort

内容的提问来源于stack exchange，提问作者talent in making