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

迈不过友情╰ 2022-12-24 05:55 174阅读 0赞

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

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

**最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。**

github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]

如果需要按特定顺序对对象数组进行排序，我们很有可能会直接找个 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`函数的返回值设置如下：

1.  小于`0`：`foo`在`bar`之前
2.  大于`0` ：`bar`在`foo`之前
3.  等于`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 函数对对象数组排序的简短的介绍。尽管许多库都提供了这种动态排序能力，但我们自己实现这个方法其实也不信。另外，了解幕后发生了对我们来说并没有坏处。

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

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

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

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi