Javascript 对象的排序列表

我有以下列表，从api获取数据：

 const Studentdata = {
   "StudentName1": {
        "active": true,
        "gender": "male" 
    },
    "StudentName2": {
        "active": false,
        "gender": "male" 
    },
    "StudentName3": {
        "active": false,
        "gender": "female" 
    },
   "StudentName4": {
        "active": true,
        "gender": "female" 
    },
   "StudentName5": {
        "active": true,
        "gender": "female" 
    },
    "StudentName6": {
        "active": false,
        "gender": "female" 
    }
}

我将这些数据呈现如下：

Object.keys(Studentdata).map(item => {
    return (
         <>
             <span>{item}</span>
             // will use {Studentdata[item]} list to render ul,li
    )

 })

我在React js中使用它，所以我需要精确的格式来渲染/重新渲染DOM。因为，我需要这个“StudentName1”来在下面显示一个学生的名字，我将显示他的详细信息。我可以得到以下信息：

Object.values(Studentdata).sort((a, b) => b.active - a.active)

但这给了我：

[0: {active: true, gender: "male"},
1: {active: true, gender: "female"},
2: {active: true, gender: "female"},
3: {active: false, gender: "male"},
4: {active: false, gender: "female"}]

---

但是如果我渲染它，我需要更改渲染方法，因此需要上面提到的格式。谢谢

，问题是您只使用

values（）

执行排序，而您也应该使用键对对象进行排序。另一个问题是，希望对象键处于特定顺序通常不是好的做法。将渲染函数更改为

results.map

，而不是

Object.keys（results.map），这样做更有意义。以下是您想要的输出：


const Studentdata={
“学生姓名1”：{
“主动”：正确，
“性别”：“男性”
},
“学生姓名2”：{
“主动”：假，
“性别”：“男性”
},
“学生姓名3”：{
“主动”：假，
“性别”：“女性”
},
“学生姓名4”：{
“主动”：正确，
“性别”：“女性”
},
“学生姓名5”：{
“主动”：正确，
“性别”：“女性”
},
“学生姓名6”：{
“主动”：假，
“性别”：“女性”
}
}
const sorted=Object.entries（Studentdata）
.sort（（a，b）=>b[1]。活动-a[1]。活动）
.reduce（（r[键，值]）=>{
r[键]=值
返回r
}, {})
console.log（已排序）
在准备渲染时对对象的条目（不仅仅是键）进行排序，这样您就有了一个包含键和关联值的已排序数组：

Object.entries(Studentdata)
  .sort((a, b) => b[1].active - a[1].active)
  .map(([name, { active, gender }]) => (
    // render ul, li with variables name, active, and gender
  ))

对
对象进行排序。条目
，然后在map语句中重新构造对象（遗憾的是使用
eval
保留变量名）：

const Studentdata={
“学生姓名1”：{
“主动”：正确，
“性别”：“男性”
},
“学生姓名2”：{
“主动”：假，
“性别”：“男性”
},
“学生姓名3”：{
“主动”：假，
“性别”：“女性”
},
“学生姓名4”：{
“主动”：正确，
“性别”：“女性”
},
“学生姓名5”：{
“主动”：正确，
“性别”：“女性”
},
“学生姓名6”：{
“主动”：假，
“性别”：“女性”
}
};
Object.entries（Studentdata）.sort（（a，b）=>b[1].active-a[1].active）.map（[name:objName，{active，gender}]）=>(
eval（`let${objName}={active:${active}，gender:${gender}}`）；
返回(
{name}
)
));
我可以知道在
[name，{active，gender}]
中方括号调用的术语是什么吗？这就是解构。如果
项
是数组，则可以使用
[val0，val1]
来提取数组的第0和第1个索引，而不是
项
。类似地，如果
val1
是一个对象，则可以使用
{active，gender}
来提取
active
和
gender
属性
val1
，如果
val1
是一个对象。如果我删除reduce（），则不会得到所需的输出。如果删除reduce（数据仍然相同），我会说“但只是在数组中”。您需要改进渲染功能以使用阵列而不是对象。
Object.entries(Studentdata)
  .sort((a, b) => b[1].active - a[1].active)
  .map(([name, { active, gender }]) => (
    // render ul, li with variables name, active, and gender
  ))

const Studentdata = {
   "StudentName1": {
        "active": true,
        "gender": "male" 
    },
    "StudentName2": {
        "active": false,
        "gender": "male" 
    },
    "StudentName3": {
        "active": false,
        "gender": "female" 
    },
   "StudentName4": {
        "active": true,
        "gender": "female" 
    },
   "StudentName5": {
        "active": true,
        "gender": "female" 
    },
    "StudentName6": {
        "active": false,
        "gender": "female" 
    }
};

Object.entries(Studentdata).sort((a, b) => b[1].active - a[1].active).map(([ name: objName, { active, gender } ]) => (
    eval(`let ${objName} = { active: ${active}, gender: ${gender} }`);
    return (
        <>
            <span>{name}</span>
    )
));