根据主对象内另一个对象列表的属性值对复杂的 javascript 对象进行排序

Question

我有以下结构中的对象列表，这些对象已经按顶层的名称属性排序。

 [{

     name: 'name1'

     team: 'team1'

     statuses: [{ time: 'day1', color: 'green', message: 'looks good'}, { time: 'day2', color: 'green', message: 'looks good'}]

    },

    {

     name: 'name2'

     team: 'team2'

     statuses: [{ time: 'day1', color: 'yellow', message: 'mild concern'}, { time: 'day2', color: 'red', message: 'critical issue'}]

    },

    {

     name: 'name3'

     team: 'team3'

     statuses: [{ time: 'day1', color: 'orange', message: 'mild concern'}, { time: 'day2', color: 'orange', message: 'potential issue'}]

    }]

上面的列表应该根据状态列表中最后一个对象的颜色属性使用自定义排序顺序（红色、橙色、绿色）进行排序。预期列表包含此顺序的对象 team2、team3、team1，如果有多个相同颜色，则它应该在顶层保留名称属性的排序。

我尝试按以下方式使用 reduce 函数并将它们组合在一起，但没有得到预期的输出。

 teams.reduce((r, t) => {

     if(t.statuses[1].color === 'red');

       r.push(t)

    return r;

   }, { [] })

  

   teams.reduce((r, t) => {

     if(t.statuses[1].color === 'orange');

       r.push(t)

    return r;

   }, { [] })

   teams.reduce((r, t) => {

     if(t.statuses[1].color === 'green');

       r.push(t)

    return r;

   }, { [] })

Answer 1

在原始数组上使用过滤器，为了排序顺序，我使用了 COLORS 数组。我在最后添加了颜色“黄色”，因为它在排序标准中没有提到，您可以根据自己的选择进行处理。扩展：正如所希望的那样，黄色现在介于橙色和黄色之间。如果它是绿色的并且评论不是“看起来不错”那么它应该出现在开头。let list = [{&nbsp; &nbsp; &nbsp;name: 'name1',&nbsp; &nbsp; &nbsp;team: 'team1',&nbsp; &nbsp; &nbsp;statuses: [{ time: 'day1', color: 'green', message: 'looks good'}, { time: 'day2', color: 'green', message: 'looks good'}]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp;name: 'name2',&nbsp; &nbsp; &nbsp;team: 'team2',&nbsp; &nbsp; &nbsp;statuses: [{ time: 'day1', color: 'yellow', message: 'mild concern'}, { time: 'day2', color: 'red', message: 'critical issue'}]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp;name: 'name3',&nbsp; &nbsp; &nbsp;team: 'team3',&nbsp; &nbsp; &nbsp;statuses: [{ time: 'day1', color: 'orange', message: 'mild concern'}, { time: 'day2', color: 'orange', message: 'potential issue'}]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp;name: 'name4',&nbsp; &nbsp; &nbsp;team: 'team4',&nbsp; &nbsp; &nbsp;statuses: [{ time: 'day1', color: 'yellow', message: 'mild concern'}, { time: 'day2', color: 'green', message: 'potential issue'}]&nbsp; &nbsp; }&nbsp; &nbsp; ];const COLORS = ['red', 'orange', 'yellow', 'green'];const GREEN = COLORS.indexOf('green');&nbsp;let result = list.sort((a,b) => {&nbsp; &nbsp; let stata = a.statuses[a.statuses.length-1];&nbsp; &nbsp; let statb = b.statuses[b.statuses.length-1];&nbsp; &nbsp; let cola = COLORS.indexOf(stata.color);&nbsp; &nbsp; let colb = COLORS.indexOf(statb.color);&nbsp; &nbsp; if (cola == GREEN && stata.message != 'looks good') {&nbsp; &nbsp; &nbsp; &nbsp; return (colb == GREEN && statb.message != 'looks good') ? a.name.localeCompare(b.name) : -1;&nbsp; &nbsp; }&nbsp; &nbsp; if&nbsp; (colb == GREEN && statb.message != 'looks good') {&nbsp; &nbsp; &nbsp; &nbsp; return 1;&nbsp; &nbsp; }&nbsp; &nbsp; return (cola < colb) ? -1 : ((cola > colb) ? 1: a.name.localeCompare(b.name));});&nbsp;console.log(result);

Answer 2

您可以创建一个对象，在其中定义颜色顺序，然后使用sort首先按颜色排序的方法，如果颜色相同，则按名称排序const data = [{"name":"name1","team":"team1","statuses":[{"time":"day1","color":"green","message":"looks good"},{"time":"day2","color":"green","message":"looks good"}]},{"name":"name2","team":"team2","statuses":[{"time":"day1","color":"yellow","message":"mild concern"},{"time":"day2","color":"red","message":"critical issue"}]},{"name":"name3","team":"team3","statuses":[{"time":"day1","color":"orange","message":"mild concern"},{"time":"day2","color":"orange","message":"potential issue"}]}]const order = {&nbsp; red: 1,&nbsp; orange: 2,&nbsp; green: 3}data.sort((a, b) => {&nbsp; const aColor = a.statuses.slice(-1)[0].color;&nbsp; const bColor = b.statuses.slice(-1)[0].color;&nbsp; return order[aColor] - order[bColor] || a.name.localeCompare(b.name)})console.log(data)