简体   繁体   English

"如何通过两个不同的键对带有对象的数组进行排序?"

[英]How sort array with objects by two diffrent keys?

I have no idea how I can sort an array of objects comparing two keys.我不知道如何对比较两个键的对象数组进行排序。 I have array:我有数组:

const arr = [
  {
    age: "20",
    group: "XXX",
    id: "3L1aa1558002753379",
    menu: "standard",
    name: "Adam"
  },
  {
    age: "22",
    group: "XXX",
    id: "xhNt11558002753379",
    menu: "standard",
    name: "Ola"
  },
  {
    otherid: "3L1aa1558002753379",
    age: "25",
    group: "YYY",
    id: "6ryVK1558002753379",
    menu: "standard",
    name: "Wommman"
  },
  {
    otherid: "xhNt11558002753379",
    age: "25",
    group: "YYY",
    id: "aL1aa1558002753312",
    menu: "standard",
    name: "xxxxxy"
  },
  {
    age: "25",
    group: "YYY",
    id: "6ryVK1558002753379",
    menu: "standard",
    name: "xxxxxo"
  }
  ,
  {
    otherid: "1ryVK1558002753372",
    age: "25",
    group: "YYY",
    id: "9ryVK155a002753370",
    menu: "standard",
    name: "xxxxxo"
  },
  {
    age: "25",
    group: "YYY",
    id: "1ryVK1558002753372",
    menu: "standard",
    name: "xxxxxo"
  }
];

You pointed out, that you only need to compute pairs and render them in a react application.您指出,您只需要计算对并在反应应用程序中呈现它们。

It would make much more sense to structure your data in a way your view can directly render it.以视图可以直接呈现数据的方式构造数据会更有意义。

Since you are in control of the data, you don't need to generate a flat list.由于您可以控制数据,因此无需生成平面列表。 You can setup the pairs (of students, or whatever) using a hierarchical structure, or nested obejcts.您可以使用层次结构或嵌套对象设置(学生或其他)对。

 let students = [{name: 'Jon', id:0}, {name: 'Peter', id: 1}, {name: 'Steve', id:2}, {name: 'Joe', id: 3}] let pairs = [{a: students [3], b: students[1]}, {a: students [2], b: students [0]}]; console.log (pairs);<\/code><\/pre>

Now if you want to render those pairs, you already have the data in the structure you need.现在,如果您想渲染这些对,您已经拥有所需结构中的数据。

 render () { return pairs.map (pair => <Pair data={pair} \/>) }<\/code><\/pre>

You can also flatten the pairs array and render a flat list of elements next to each other if you prefer.如果您愿意,您还可以展平pairs 数组并呈现彼此相邻的平面元素列表。

 let students = [{name: 'Jon', id:0}, {name: 'Peter', id: 1}, {name: 'Steve', id:2}, {name: 'Joe', id: 3}] let pairs = [{a: students [3], b: students[1]}, {a: students [0], b: students [2]}]; const flatten = (flat, {a, b}) => [...flat, a, b]; const sorted = pairs.reduce (flatten, []); console.log (sorted)<\/code><\/pre>

 const Student = data => <div>{data.name} const Pair = pair => <div> <Student data={pair.a} \/> <Student data={pair.b} \/>  const renderFlat = () => { return sorted.map (student => <Student data={student} \/> } const renderPairs = () => { reutnr pairs.map (pair => <Pair data={pair} \/>) }<\/code><\/pre>

I hope I make at least a bit sense.我希望我至少有点道理。 - Here is the sort function in any case - 无论如何,这是排序功能

 function sort (arr) { let otherids = arr.reduce ((lkp, obj) => { if (obj.otherid) lkp [obj.otherid] = obj; return lkp; }, {}); let sorted = []; for (var i=0; i < arr.length; i++) { let obj = arr [i]; if (!!~sorted.indexOf (obj)) continue; if (otherids [obj.id]) { sorted.push (obj) sorted.push(otherids[obj.id]) } } return sorted.concat (arr.filter (obj => !~sorted.indexOf (obj))); } let sorted = sort (arr); console.log (sorted);<\/code><\/pre>
 <script>var arr=[{age:"20",group:"XXX",id:"3L1aa1558002753379",menu:"standard",name:"Adam"},{age:"22",group:"XXX",id:"xhNt11558002753379",menu:"standard",name:"Ola"},{otherid:"3L1aa1558002753379",age:"25",group:"YYY",id:"6ryVK1558002753379",menu:"standard",name:"Wommman"},{otherid:"xhNt11558002753379",age:"25",group:"YYY",id:"aL1aa1558002753312",menu:"standard",name:"xxxxxy"},{age:"25",group:"YYY",id:"6ryVK1558002753379",menu:"standard",name:"xxxxxo"},{otherid:"1ryVK1558002753372",age:"25",group:"YYY",id:"9ryVK155a002753370", menu:"standard",name:"xxxxxo"},{age:"25",group:"YYY",id:"1ryVK1558002753372",menu:"standard",name:"xxxxxo"}];<\/script><\/code><\/pre>

"

The key to sorting strings is to use String.localeCompare()<\/code> .排序字符串的关键是使用String.localeCompare()<\/code> 。 Numbers, dates and booleans are much simpler.数字、日期和布尔值要简单得多。

Here is an example of sorting a list of Objects by two string columns - name<\/code> and menu<\/code> :这是一个按两个字符串列( name<\/code>和menu<\/code> )对对象列表进行排序的示例:

arr.sort(function comparerFn(L, R){
    if(L.name !== R.name) 
        return (new String(L.name)).localeCompare(R.name)===1?1:-1
    if(L.menu !== R.menu) 
        return (new String(L.menu)).localeCompare(R.menu)===1?1:-1
    return 0
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM