要实现这一功能,我们首先要了解 js 中的 sort()函数
先简单写一个例子试一下功能

var strlist = ['x','a','c','m']
console.log(strlist.sort())
console.log(strlist)

我们可以发现数组按照字母顺序排列了,另外原数组也一起发生了改变
image.png

查阅官方文档我们知道,sort()函数是按照ACSII码顺序进行比较的,所以当我们把字符串中的字母换成数字时会发现结果并不跟我们想象的一样,从小到大排序
var strlist = ['34','111','2','56']
image.png

那我们如果想要数字按照从小到大的顺序,该怎么办呢?
查阅 sort()函数的语法
arrayObject.sort(sortby)

我们需要提供一个比较函数

var strlist = ['34', '111', '2', '56']
console.log(strlist.sort(function (a, b) {
    return a - b
}))

image.png

根据《JavaScript权威指南》的说法:

给sort方法传递一个比较函数,该函数决定了它的两个参数在排好序的数组中的先后顺序:假设第一个参数应该在前,比较函数应该返回一个小于0的数值,反之,假设第一个参数应该在后,函数应该返回一个大于0的数值,并且,假设两个值相等,函数应该返回0。

也就是说,在这种简单的字符串数组的情况下,我们要让数字从小到大排序,只要让函数比较前后两数,并返回一个小于 0 的值就可以了

接下来我们来看如何对中文进行排序
我们使用JavaScript中的localeCompare() 方法

语法
stringObject.localeCompare(target)
返回值
说明比较结果的数字。如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target,则该方法返回大于 0 的数。如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。
var strlist = ['中国', '印度', '法国', '俄罗斯']
console.log(strlist.sort(function (item1, item2) {
    return item1.localeCompare(item2, "zh-CN");
}))

image.png

下面我们开始整合这些信息,封装为一个函数,可用于数组的排序
定义一个数组

var list = [
    {
        id: 4,
        name: '江苏',
        field: 'bbb'
    },
    {
        id: 1,
        name: '浙江',
        field: 'xyz'
    },
    {
        id: 5,
        name: '广东',
        field: 'oiw'
    },
    {
        id: 3,
        name: '安徽',
        field: 'kkk'
    }
]
function sort(list, field) {
    var str = list[0][field]
    var pattern = new RegExp("[\u4E00-\u9FA5]+");
    var pattern2 = new RegExp("[A-Za-z]+");
    //验证是否是中文
    if (pattern.test(str) || pattern2.test(str)) {
        list.sort(function (item1, item2) {
            return item1[field].localeCompare(item2[field], "zh-CN");
        });
    }
    //验证是否是数字
    var pattern3 = new RegExp("[0-9]+");
    if (pattern3.test(str)) {
        list.sort(function (a, b) {
            var value1 = a[field];
            var value2 = b[field];
            return value1 - value2;
        });
    }
}
sort(list, "name")//按照中文排序
console.log(list)
sort(list, "id")//按照数字排序
console.log(list)
sort(list, "field")//按照英文排序
console.log(list)

image.png


无锡肖奈
186 声望7 粉丝

十八线野生程序猿 前端开发