JavaScript如何根据用户选择实现对象数组动态升降序排序

你可以直接借助JavaScript原生的Array.prototype.sort()方法，封装一个通用排序函数适配所有字段的升降序排序需求，不需要引入额外依赖。
注意你的数组中DocumentNo是字符串格式的数字，直接按字符串规则比较会出现排序偏差（比如"100"会排在"2"前面），所以函数里需要增加类型判断，统一处理数字、数字字符串、普通字符串三类值的比较逻辑。

通用排序函数代码 #

/**
 * 对象数组通用排序方法
 * @param {Array} targetArr 待排序原数组
 * @param {string} sortField 排序依据的字段名
 * @param {string} sortOrder 排序方向，传'asc'为升序，传'desc'为降序，默认升序
 * @returns {Array} 排序后的新数组，不会修改原数组
 */
function customSort(targetArr, sortField, sortOrder = 'asc') {
  // 浅拷贝原数组，避免排序操作修改原始数据
  return [...targetArr].sort((prev, next) => {
    let valueA = prev[sortField]
    let valueB = next[sortField]

    // 统一处理值为数字的字符串字段，避免字符串排序偏差
    if (!isNaN(Number(valueA)) && !isNaN(Number(valueB))) {
      valueA = Number(valueA)
      valueB = Number(valueB)
    }

    // 升序比较逻辑
    if (sortOrder === 'asc') {
      return valueA > valueB ? 1 : valueA < valueB ? -1 : 0
    }
    // 降序比较逻辑
    return valueA < valueB ? 1 : valueA > valueB ? -1 : 0
  })
}

使用示例 #

直接传入待排序数组、排序字段、排序方向即可得到结果，对应你提到的几个场景：

// 1. 按DocumentNo降序排列
const docNoDescResult = customSort(arr, 'DocumentNo', 'desc')
// 返回结果的DocumentNo顺序为'48'、'47'、'46'、'45'、'44'，符合预期

// 2. 按FileId升序排列
const fileIdAscResult = customSort(arr, 'FileId', 'asc')
// 返回结果的FileId顺序为1、2、3、4、5，符合预期

// 3. 按FileId降序排列
const fileIdDescResult = customSort(arr, 'FileId', 'desc')
// 返回结果的FileId顺序为5、4、3、2、1，符合预期

其余字段排序逻辑完全一致，比如要按文件名升序、文档类型ID降序，直接传入对应字段名即可：

// 按文件名升序
const filenameAscResult = customSort(arr, 'FilenameWithExtension', 'asc')
// 按文档类型ID降序
const docTypeDescResult = customSort(arr, 'DocTypeId', 'desc')

补充说明 #

• 函数默认返回排序后的新数组，不会修改原始数组，如果需要直接修改原数组，去掉[...targetArr]的浅拷贝逻辑，直接调用targetArr.sort()即可。
• 内置的数字字符串转换逻辑不会影响普通字符串（比如文件名）的默认排序规则，可以放心使用。
• 你可以直接把用户选择的字段、排序方向作为参数传入这个函数，不需要针对每个字段单独写排序逻辑。

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