Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。
如果你有一个对象数组,你需要排序成一个特定的顺序,诱惑可能是能够得到一个JavaScript库。 然而在你动手之前,记住你可以用Array.sort函数做一些整洁排序。 在本文中,我将向您展示如何在JavaScript中进行对象数组进行排序,不必担心或烦恼。
为了跟上这篇文章,你需要一个基本的JavaScript概念的知识,例如声明变量,写函数和条件语句。 我也将使用ES6语法。 你可以在这里得到一个复习:https://www.sitepoint.com/tag/es6/
基本数组排序
默认情况下,JavaScript的Array.sort函数将要排序的数组中每个元素转换为字符串,并根据其Unicode代码点顺序进行比较。
你可能想知道为什么30排在4之前...不合逻辑?好吧,其实是这样的。这是因为数组中的每个元素首先被转换为字符串,在Unicode顺序中“30”排在“4”之前。
还值得注意的是,与许多其他JavaScript数组函数不同,Array.sort函数实际上改变了或者变异了排序的数组。
为了避免这种情况,你可以创建一个要排序和修改的新的数组实例。
单独使用Array.sort函数对于排序对象数组并不是非常有用,幸运的是该函数接受一个可选的compareFunction参数,该参数会根据compare函数的返回值对数组元素进行排序。
使用比较函数进行排序
假设a和b是由比较函数比较的两个元素。 如果比较函数的返回值是:
1.小于0 -- a在b之前
2.大于0 -- b在a之前
3.等于0 -- a和b相对于彼此保持不变
让我们看一个有数字数组的简单例子:
这可以稍微重构,通过从b减去a来获得返回值;
这现在成为一个很好的候选的箭头函数:
在JavaScript中进行对象数组排序
现在让我们看看对象数组排序。 让我们以一个乐队对象数组为例:
我们可以使用以下比较函数依据类型对这个对象数组排序:
要反转排序顺序,你可以简单地反转该比较函数的返回值:
创建动态排序功能
最后让我们增加更多的变量。让我们创建一个排序函数,你可以使用它来排序对象数组,其值是字符串或数字。此函数有两个参数--我们排序依据的线索和结果的顺序(如升序或降序)。
这是你将如何使用它:
在上面的代码中,hasOwnProperty方法用于检查指定的属性是否在每个对象上定义,并且没有通过原型链继承。如果没有在对象上定义,则函数返回0,这使得排序顺序保持不变(即对象相对于彼此保持不变)。
typeof运算符也用于检查属性值的数据类型。这允许函数确定对数组进行排序的正确方法。例如,如果指定的属性的值是字符串,则使用toUpperCase方法将其所有字符转换为大写,因此在排序时忽略字符大小。
你可以调整上述函数以适应其他数据类型,以及脚本需要的任何其他特性。
结论
现在你有了一个关于对象数组排序的简短了解。虽然许多JavaScript库提供了这种动态排序能力(例如Underscore.js,Lodash和Sugar),但是这并不是很难实现这种功能。
如果你有任何问题或意见,我很高兴在评论中听到它们。
本文由MoritzKröger,Giulio Mainardi,Vildan Softic和Rob Simpson同行评审。感谢所有SitePoint的同行评审,是你们让SitePoint内容成为最好!
英文原文:https://www.sitepoint.com/sort-an-array-of-objects-in-javascript/
译者:李特夫斯基