JS 数组方法 Array.sort()

作者：辰风沐阳阅读：732 发布时间：2023-02-14 上次更新：2023-02-17

[TOC]

#### 1. 情景再现
---

最近在开发一个物联网项目时，需要对一个数据进行排序处理，这个数据结构如下所示：

需要根据 position 属性将数组元素进行升序排序，换做是你，代码会怎么写？

```javascript
const data = [
    { id: 1, name: 'maria', position: 17 },
    { id: 2, name: 'liang', position: 18 },
    { id: 3, name: 'monday', position: 16 },
    { id: 4, name: 'monday', position: 15 },
    { id: 5, name: 'monday', position: 19 },
]
```

我的第一个想法是这样的：先取出数组元素中的 position 属性，然后对其进行升序排列，再查询每一个 position 在原数组中的下标，最后构建出所需的数据结构，代码如下所示。这种写法显然是比较复杂的，于是我在想有没有更好的方法实现

```javascript
const arr = data.map(({ position }) => position)
arr.sort()
const newArr = arr.map(val => {
    return data.findIndex((item, index) => item.position == val)
}).map(item => data[item])
```

#### 2. Array.sort()
---

众所周知，Array.sort() 方法用于数组排序，使用它一般都是不带参数，但它是有参数的，此时说明了基础牢固的重要性

Array.sort() 默认把数组元素先转为 string 类型，字符串是根据 ASCII 码进行升序排列

```javascript
// 你意料之中的结果
[5, 3, 8, 6].sort();// [3, 5, 8, 6]

// 下面的结果可能是你意料之外的
[10, 20, 1, 2].sort();// [1, 10, 2, 20]
```

幸运的是，Array.sort() 也是一个高阶函数，支持传入一个比较函数来自定义排序

传入的函数返回值如果小于 0，前后两个元素会交换位置

```javascript
// x 后一个元素 y 当前一个元素
[10, 20, 1, 2].sort((x, y) => x - y);// [1, 2, 10, 20]
```

回到上面的问题，对于数组元素是一个对象，根据对象中某个属性进行排序。可以这样写：

JS 数组方法 Array.sort()

最新发布

友情链接