【JS函数】JS函数之排序函数,对象数组根据某属性排序

本文详细介绍了JavaScript中的函数,包括普通函数、构造函数、闭包,以及定时器函数、防抖和节流函数。重点讨论了sort()方法在数组排序中的应用,解释了默认排序规则及如何自定义比较函数进行数字和对象数组的排序。通过实例展示了如何根据对象属性进行排序,并提供了可复用的比较函数模板。
摘要由CSDN通过智能技术生成

 自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。

JS函数专栏

1【JS函数】JS函数之普通、构造、闭包函数

2【JS函数】JS函数之定时器函数

3【JS函数】JS函数之防抖、节流函数

4【JS函数】JS函数之排序函数,对象数组根据某属性排序

5【JS函数】JS函数之高阶函数、组合函数、函数柯里化 

一、普通数组排序  

js中用方法sort()为数组排序。sort()方法有一个可选参数,是用来确定元素顺序的函数。如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序。如:

var arr = ["a", "b", "A", "B"];

arr.sort();

console.log(arr);//["A", "B", "a", "b"]

因为字母A、B的ASCII值分别为65、66,而a、b的值分别为97、98,所以上面输出的结果是 ["A", "B", "a", "b"]。如果数组元素是数字呢,结果会是怎样?

var arr = [15, 8, 25, 3];

arr.sort();

console.log(arr);//[15, 25, 3, 8]

结果是 [15, 25, 3, 8] 。其实,sort方法会调用每个数组项的toString()方法,得到字符串,然后再对得到的字符串进行排序。虽然数值15比3大,但在进行字符串比较时”15”则排在”3”前面。显然,这种结果不是我们想要的,这时,sort()方法的参数就起到了作用,我们把这个参数叫做比较函数。

比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数。如果要按降序排序,比较函数写成这样即可:

var compare = function (x, y) {
    if (x < y) {
        return 1;
    } else if (x > y) {
        return -1;
    } else {
        return 0;
    }
}

我们并不能用比较函数比较一个不能转化为数字的字符串与数字的顺序:

var arr = ["b", 5];

console.log(arr.sort(compare)) // ["b", 5]

比较函数在比较时,会把先把字符串转化为数字,然后再比较,字符串b不能转化为数字,所以就不能比较大小。然而,当不用比较函数时,会比较ASCII值,结果则会改变为 [5, "b"] 。

二、数组对象排序

如果数组项是对象,需要根据数组项的某个属性对数组进行排序

const arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
const compare = function (obj1, obj2) {
    const val1 = obj1.name;
    const val2 = obj2.name;
    if (val1 < val2) {
        return -1;
    } else if (val1 > val2) {
        return 1;
    } else {
        return 0;
    }
}

console.log(arr.sort(compare));
//[Object { name="wlz", age=25}, Object { name="zlw", age=24}]
我们可以对上面的比较函数再改造一下
const compare = function (prop) {
    return function (obj1, obj2) {
        const val1 = obj1[prop];
        const val2 = obj2[prop];if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值