这样的数组怎样排序？

Question

var a = [{
    color: 'red',
    size: 'A'
},{
    color: 'black',
    size: 'B'
},{
    color: 'white',
    size: 'C'
},{
    color: 'red',
    size: 'C'
},{
    color: 'white',
    size: 'B'
},{
    color: 'black',
    size: 'C'
}]

最终想得到的结果为

var a = [{
    color: 'red',
    size: 'A'
},{
    color: 'red',
    size: 'C`'
},{
    color: 'black',
    size: 'B'
},{
    color: 'black',
    size: 'C'
},{
    color: 'white',
    size: 'C'
},{
    color: 'white',
    size: 'B'
}]

即红色的排在一起，黑色的排在一起，白色的排在一起。同时这些颜色的值会有很多，需要写一个公共的方法，把数组里面的相同颜色的元素排放在一起，怎样做？

Answer 1

> a.sort((x,y)=>x.size>y.size).sort((x,y)=>x.color>y.color)
[ { color: 'black', size: 'B' },
  { color: 'black', size: 'C' },
  { color: 'red', size: 'A' },
  { color: 'red', size: 'C' },
  { color: 'white', size: 'B' },
  { color: 'white', size: 'C' } ]

Answer 2

楼上的思路是正确的。但如果你一定要按照先 "red" 然后 "black" 再 "white" 的顺序来排，可以这样：

var order = ['red', 'black', 'white']

a.sort((x, y) => x.size < y.size).sort((x, y) => order.indexOf(x.color) < order.indexOf(y.color) ? -1 : 1)

这样你就可以得到先 "red"，然后 "black", 然后 "white" 的顺序，并且每个组的 "size" 也是按照字母顺序排好的

---

如果你不喜欢写死，或者 color 有多少种是不确定的，那你也可以这样写，把不重复的 color 值按出现顺序提取出来：

var colorArray = a.map(ele => ele.color).filter((element, index, arr) => arr.indexOf(element) === index)

// ["red", "black", "white"]