如何对JS对象及嵌套对象按属性值降序排序并按要求展示

你可以通过递归处理对象+按值降序排序键值对+重新构建有序对象的方式实现需求。ES6+ 标准中，JS 对象的字符串类型属性会严格按照插入顺序保留，完全可以满足排序展示要求。

完整实现代码 #

// 计算属性的排序权重，可根据业务规则调整
function getSortValue(val, key, parentObj) {
  // 数字类型直接返回值作为权重
  if (typeof val === 'number') return val
  // 嵌套的优惠对象按同品类的价格权重排序，适配你的业务场景
  if (typeof val === 'object' && key.endsWith('Savings')) {
    const prefix = key.replace('Savings', '')
    return parentObj[`${prefix}Price`] || 0
  }
  // 其他通用对象取内部最大值作为权重
  return Math.max(...Object.values(val))
}

// 递归按属性值降序排序对象
function sortObjectByValueDesc(obj) {
  // 非对象、数组、null 类型直接返回，无需处理
  if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
    return obj
  }
  // 转成 entries 数组后按权重降序排序
  const sortedEntries = Object.entries(obj).sort((a, b) => {
    const weightA = getSortValue(a[1], a[0], obj)
    const weightB = getSortValue(b[1], b[0], obj)
    return weightB - weightA
  })
  // 递归处理每个值，再转成新的有序对象
  return Object.fromEntries(
    sortedEntries.map(([key, val]) => [key, sortObjectByValueDesc(val)])
  )
}

调用示例 #

// 你的原始数据
const originData = {
  "carDetails": {
    "suvPrice": 60,
    "suvSavings": {
      "10% Off": 10,
      "20% Off": 20,
      "Fire Sale": 30
    },
    "truckPrice": 90,
    "truckSavings": {
      "10% Off": 10,
      "Buy Now": 40
    }
  }
}

// 调用排序
const sortedData = {
  carDetails: sortObjectByValueDesc(originData.carDetails)
}

// 打印验证，输出顺序和你期望的完全一致
console.log(JSON.stringify(sortedData, null, 2))

注意事项 #

• 该方案仅兼容ES6及以上运行环境，老旧浏览器（如IE）不保证对象属性顺序
• 如果仅需按顺序渲染展示，不需要保留对象结构，可以直接使用排序后的entries数组渲染，兼容性更强
• 可以修改getSortValue函数的逻辑，灵活适配不同的排序规则

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