您现在的位置是：亿华云 > IT科技

如何在JavaScript中对对象数组进行排序

亿华云2025-10-04 03:23:42【IT科技】5人已围观

简介如果需要按特定顺序对对象数组进行排序，我们很有可能会直接找个 JS 库来用。其实大可不必，JS 原生中的 Array.sort就能直接一些复杂又漂亮的排序。本文中，将介绍一些 Array.sort 的

如果需要按特定顺序对对象数组进行排序，中组进我们很有可能会直接找个 JS 库来用。对对其实大可不必，象数行排序JS 原生中的中组进 Array.sort就能直接一些复杂又漂亮的排序。

本文中，对对将介绍一些 Array.sort 的象数行排序常规排序和一些骚操作。

基本数组排序

默认情况下，中组进Array.sort函数将数组中需要排序的对对每个元素转换为字符串，并按 Unicode 顺序对其进行比较。象数行排序

你可能会好奇为啥32排在5之前。发生这种情况是对对因为数组中的每个元素都首先转换为字符串，并且按照Unicode顺序，象数行排序"32"在"5"之前。中组进

需要注意的对对是，Array.sort会更改原数组。象数行排序

const baz = [My cat ate my homework, 37, 9, 5, 17]; baz.sort(); // baz数组被修改 console.log(baz); // shows [ 17, 37, 5, 9, My cat ate my homework ]

为避免这种情况，我们可以创建要排序的数组的新实例，然后在新的数组上进行修改。这里可以使用 Array.slice它返回是一个新的数组实例。

// 创建baz数组的新实例并对其进行排序 const sortedBaz = baz.slice().sort();

我们还可以使用 ES6 中的云服务器提供商展开运算符来做：

const sortedBaz = [...baz].sort();

在两种情况下，输出是相同的：

console.log(baz); // [My cat ate my homework, 37, 9, 5, 17]; console.log(sortedBaz); // [ 17, 37, 5, 9, My cat ate my homework ]

单独使用Array.sort不能对对象数组进行排序。但不必担心，sort 的还提供一个参数，该参数使数组元素根据compare函数的返回值进行排序。

使用比较函数进行排序

假设foo和bar是compare函数要比较的两个元素，compare函数的返回值设置如下：

小于0：foo在bar之前大于0 ：bar在foo之前等于0：foo和bar彼此保持不变。

来看一个简单的示例：

const nums = [79, 48, 12, 4]; function compare(a, b) { if (a > b) return 1; if (b > a) return -1; return 0; } nums.sort(compare); // => 4, 12, 48, 79

我们可以稍微重构一下:

function compare(a, b) { return a - b; }

使用在使用箭头函数进行重构：

nums.sort((a, b) => a - b);

如何对对象数组进行排序

现在，我们来按一下对对象数组的排序。假设有下面的 singers 数组：

我们可以使用 compare函数，然后根据 singers 中的 band 字段来进行排序。

如果要让上面的顺序相反，可以这么做：

function compare(a, b) { ... // 乘以-1来反转返回值 return comparison * -1; }

创建一个动态排序函数

最后，排序函数更具动态性。

我们创建一个排序函数，可以使用该函数对一组对象进行排序，这些对象的值可以是字符串或数字。该函数有两个参数-我们要排序的键和返回结果的亿华云计算顺序(即升序或降序)：

使用：

//数组按`band`排序，默认为升序 singers.sort(compareValues(band)); // 数组按 `band` 降序排序 singers.sort(compareValues(band, desc)); // 数组按 `name` 升序排序 singers.sort(compareValues(name)); // 数组born 降序排序 singers.sort(compareValues(born, desc));

在上面的代码中，hasOwnProperty方法用于检查指定的属性是否在每个对象上定义，且没有通过原型链继承。如果没有在两个对象上定义，函数返回0，排序顺序保持不变(即对象之间保持不变)。

typeof运算符还用于检查属性值的数据类型，这使函数可以确定对数组进行排序的正确方法。如果指定属性的值是一个字符串，则使用toUpperCase方法将其所有字符都转换为大写，因此排序时将忽略字符大小写

最后，你可以根据自己需求来调整上面的函数。

String.prototype.localeCompare()

在上面的示例中，我们希望能够对对象数组进行排序，其值可以是字符串或数字。但是，如果我们知道处理值是字符串的对象，则可以使用 JS 的localeCompare方法

比较两个字符串，高防服务器并返回下列值中的一个：

如果字符串在字母表中应该排在字符串参数之前，则返回一个负数; 如果字符串等于字符串参数，则返回 0; 字符串在字母表中应该排在字符串参数之后，则返回一个正数; [bjork, Bjork, Björk].sort(); // [ Bjork, Björk, bjork ] [bjork, Bjork, Björk].sort((a, b) => a.localeCompare(b)); // [ bjork, Bjork, Björk ]

根据compareValues函数，我们可以这么写：

function compareValues(key, order = asc) { return function innerSort(a, b) { if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) return 0; const comparison = a[key].localeCompare(b[key]); return ( (order === desc) ? (comparison * -1) : comparison ); }; }

总结

上面就是使用普通JS 函数对对象数组排序的简短的介绍。尽管许多库都提供了这种动态排序能力，但我们自己实现这个方法其实也不信。另外，了解幕后发生了对我们来说并没有坏处。

今天就跟大家分享到这里了，感谢大家的观看，我们下期再见。

作者：James Hibbard 译者：前端小智来源：sitepoint

原文：https://www.sitepoint.com/sort-an-array-of-objects-in-javascript/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。