美文网首页
sort排序改变数组中的子项顺序

sort排序改变数组中的子项顺序

作者: 坏丶毛病 | 来源:发表于2020-11-16 09:41 被阅读0次

有时候,我们得到的数组并不是按照我们期望的顺序排列的,那么我们需要按照我们的需求把他们进行排序。

例如:我们有个数组,我们希望按照从小到大的顺序排列

const arr = [1, 3, 6, 768, 11, 42, 56];
arr.sort((a,b) => a-b));
console.log(arr); // [1, 3, 6, 11, 42, 56, 768]
image

这里看下官网的介绍,如果不提供比较函数,那么sort会按默认的规则进行排序,如果我们提供一个比较函数,那么就会按照我们自定义的方法去进行排序。

a和b进行比较,如果返回值是小于0的数,那么认为a就在b的前面,那么排序后a也就是在b的前面的。

针对简单数组,我们可以按照例如 a-b 的方法去进行比较函数来排序。

那么如果针对数组对象呢?

看下下面的案例:

我有一个单号数组:【'12', '45', '31'】, 然后拿单号去进行formData请求数据,但是后端请求到的数据并不是按照这个单号的顺序进行排列的。

那么我们如和根据单号的顺序去进行排序呢?

const mailNo = ['12', '31', '45'];

const data = [
    {
        'id': '45',
        'name': 'demo1'
    },
    {
        'id': '12',
        'name': 'demo2'
    },
    {
        'id': '31',
        'name': 'demo3'
    }
]

data.sort((a,b) => mailNo.indexOf(a.id) - mailNo.indexOf(b.id));
console.log(data);
image

如上图打印结果,我们可以看到数组中的数据按照我们单号数组的顺序进行了排列。

简单解释下代码:我们对data进行排序,提供了比较函数,我们对当前a的id和b的id分别在单号数组(mailNo)中的下标来判断,因为它们本身都是在单号数组中存在的,那么必然会返回对应的下标值,那么我们根据下标值的前后就能得出差值,小于0说明该元素应该在前,那么就会进行排序。

当然,sort还有很多的应用场景,我们只需提供对应的比较函数,就能得到我们想要的效果。

好了,如有问题,请指出,接受批评。

相关文章

  • sort排序改变数组中的子项顺序

    有时候,我们得到的数组并不是按照我们期望的顺序排列的,那么我们需要按照我们的需求把他们进行排序。 例如:我们有个数...

  • Array方法

    sort() sort() 对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。如果想让sort方...

  • js字符串和数组的方法

    未完待续 1 js中数组的方法哪些能改变原数组?(7种) Reverse(),sort() ----颠倒顺序、排序...

  • 从小到大,从大到小,PHP 数组排序

    数组排序:数组中的元素能够以字母或数字顺序进行升序或降序排序。 PHP - 数组的排序函数 sort() - 以升...

  • PHP之数组键值排序

    数组中的元素能够以“字母或数字顺序”进行“升序或降序”排序 PHP 数组排序函数: sort() - 以升序对数组...

  • ES5-Array-sort

    sort方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。 上面代码的最后两个例子,需要特殊...

  • 数组方法-sort()、toString()、eval()

    一、sort() 1、如果sort()方法中没有sortby参数,则按照字母顺序对数组进行排序。 eg: arr ...

  • sort原理

    sort()对数组进行排序,原数组改变 sort()方法没有参数时,按照ascii码对元素进行排序 sort()方...

  • 数组排序

    通过数组的方法进行数组排序 reverse() 方法颠倒数组中元素的顺序。 sort() 方法排序顺序可以是字母或...

  • 前端JavaScript中array数组的基础相关方法-数组排序

    数组排序 一、reverse 反转数组顺序 二、sort sort每次使用两个值进行比较 Array.sort((...

网友评论

      本文标题:sort排序改变数组中的子项顺序

      本文链接:https://www.haomeiwen.com/subject/kxsabktx.html