如何在JavaScript中通过属性值对对象数组进行排序

让我们来看看如何在JavaScript中通过一个属性值对一个对象数组进行排序!

发表于2018年12月6日，最后更新于2022年4月11日

假设你有一个对象的数组。

你可能会遇到这样的问题：如何通过一个属性的值对这个对象数组进行排序？

假设你有一个这样的对象数组。

const list = [
  { color: 'white', size: 'XXL' },
  { color: 'red', size: 'XL' },
  { color: 'black', size: 'M' }
]

你想渲染这个列表，但首先你想按照其中一个属性的值来排序。例如，你想按颜色名称排序，按字母顺序排列：黑、红、白。

你可以使用Array 的sort() 方法，该方法需要一个回调函数，该函数将数组中包含的两个对象作为参数（我们称之为a 和b ）。

list.sort((a, b) => (a.color > b.color) ? 1 : -1)

当我们返回1时，该函数向sort() ，即对象b 在排序上优先于对象a 。返回-1 ，就会起到相反的作用。

回调函数也可以计算其他属性，以处理颜色相同的情况，也可以按次要属性排序。

list.sort((a, b) => (a.color > b.color) ? 1 : (a.color === b.color) ? ((a.size > b.size) ? 1 : -1) : -1 )

我还做了这个视频，介绍了如何在JavaScript中通过一个属性值对一个数组的对象进行排序。