`

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 arr = [23, 9, 4, 78, 3];
var compare = function (x, y) {//比较函数
    if (x < y) {
        return -1;
    } else if (x > y) {
        return 1;
    } else {
        return 0;
    }
}
console.log(arr.sort(compare));   
    

结果为 [3, 4, 9, 23, 78] ,返回了我们想要的结果。如果要按降序排序,比较函数写成这样即可:


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"] 。

二、数组对象排序
  如果数组项是对象,我们需要根据数组项的某个属性对数组进行排序,要怎么办呢?其实和前面的比较函数也差不多:

var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
var compare = function (obj1, obj2) {
    var val1 = obj1.name;
    var 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}] ,可以看到数组已经按照 name 属性进行了排序。我们可以对上面的比较函数再改造一下:


var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}

如果想按照 age 进行排序, arr.sort(compare("age")) 即可。

  但是对age属性进行排序时需要注意了,如果age属性的值是数字,那么排序结果会是我们想要的。但很多时候我们从服务器传回来的数据中,属性值通常是字符串。现在我把上面的数组改为:

var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];

可以看到,我把 age 属性由数字改为了字符串,第二个数组项的 age 值改为了 "5" 。再次调用 arr.sort(compare("age")) 后,结果为:

[Object { name="zlw", age="24"}, Object { name="wlz", age="5"}]

我们的期望是5排在25前面,但是结果不是。这是因为当两个数字字符串比较大小时,会比较它们的ASCII值大小,比较规则是:从第一个字符开始,顺次向后直到出现不同的字符为止,然后以第一个不同的字符的ASCII值确定大小。所以"24"与"5"比较大小时,先比较”2“与"5"的ASCII值,显然”2“的ASCII值比"5"小,即确定排序顺序。

  现在,我们需要对比较函数再做一些修改:


var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}


在比较函数中,先把比较属性值转化为数字 Number(val1) 再通过 !isNaN(Number(val1)) 判断转化后的值是不是数字(有可能是NaN),转化后的值如果是数字,则比较转换后的值,这样就可以得到我们想要的结果了, 调用  arr.sort(compare("age")) 得到:

[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]

可以看到,确实是按正确的方式排序了。
分享到:
评论

相关推荐

    js对象数组按属性快速排序

    按所推荐的程序在IE下跑了下,的确,排序耗时很小。 代码如下: [removed] /* * 洗牌 */ function getRandomPlayCard(m){ var array1=new Array(m); for(var i=0;i&lt;m;i++){ var rnd=Math.floor(Math.random()*(i+0...

    js中的数组对象排序分析

    JavaScript中的数组对象排序是一个重要的概念,特别是在处理数据和列表展示时。本文主要分析了JavaScript中数组的`sort()`方法以及如何使用比较函数进行自定义排序。 首先,`sort()`方法是JavaScript数组对象的一个...

    vue数组对象排序的实现代码

    Vue 数组对象排序的实现代码主要介绍了在 Vue 框架中对数组对象的排序方法,包括普通数组的排序和数组对象的排序。下面是对应的知识点: 普通数组的排序 在 Vue 中,对普通数组的排序可以使用 `sort()` 方法,但是...

    javascript中数组、对象

    文档"Javascript数组操作整理.doc"可能包含了对数组常见操作的详细总结,如遍历方法(`for`循环、`forEach`、`map`等)、查找方法(`indexOf`、`find`、`filter`等)、排序方法(`sort`)、转换方法(`concat`、`...

    JS数组中对象去重操作示例

    - **《JavaScript数组操作技巧总结》**:涵盖数组的创建、遍历、合并、排序、过滤等多种操作。 - **《JavaScript字符与字符串操作技巧总结》**:涉及字符串的拼接、截取、查找、替换等方法。 - **《JavaScript...

    纯js对象数组排序汇总处理类

    js中包含一个类,该类的主要功能是:对对象数组进行多字段排序和汇总。调用方法类似: 1、排序 :new SPArraySortHelper(数据, 分组排序字段, 汇总字段).sort() 2、汇总:new SPArraySortHelper(数据, 分组排序字段,...

    JavaScript对象数组排序函数及六个用法

    为了应对不同场景下的排序需求,本文将介绍一个自定义的JavaScript函数,该函数支持对数组或对象进行排序,并且能够根据数组或对象中嵌套的任意深度的子键进行排序。以下是对该函数及其使用方法的详细解析。 函数...

    JavaScript对象数组如何按指定属性和排序方向进行排序

    首先,了解JavaScript数组的`sort()`方法。`sort()`方法允许我们对数组元素进行原地排序,它接受一个可选的`compareFunction`参数,用于自定义排序规则。如果没有提供`compareFunction`,数组元素默认按照字符串的...

    javascript json对象数组排序

    javascript中实现对象数组的排序功能 只要数组中的对象存在多个属性,即可传入sql语句排序形式的参数,加以排序,如传入'col1 desc,col2 asc' 就可以实现对数组中对象通过col1倒序排列,如果col1值相同,则通过col2排序,...

    排序函数(数字或字符串数组排序)

    为普通数组和对象数组排序,对象数组排序时,可指定排序所依据的对象属性,汉字将以汉语拼音为序。

    JavaScript对象数组的排序处理方法

    本文实例讲述了JavaScript对象数组的排序处理方法。分享给大家供大家参考,具体如下: javascript的数组排序函数 sort方法,默认是按照ASCII 字符顺序进行升序排列。 arrayobj.sort(sortfunction); 参数:sort...

    js中数组中相同的元素进行整合并创建一个新数组.pdf

    在JavaScript编程中,数组操作是常见的任务之一,特别是在处理数据集合时。本示例中,我们探讨的是如何处理包含重复元素的数组,并将其整合成一个新的结构。这个问题可以通过一个名为`sortArr`的函数来解决,它接收...

    javascript 对象数组根据对象object key的值排序

    在JavaScript中,对对象数组进行排序是一项常见的任务。在给定的标题和描述中,我们看到作者分享了一个实现根据对象属性值对数组排序的方法。这个方法适用于数组中的每个元素都是一个对象,且需要根据对象的某个键...

    JS实现根据数组对象的某一属性排序操作示例

    综上所述,通过对数组对象属性的排序示例的学习,我们可以深入理解JavaScript数组的`sort()`方法和闭包的应用。同时,结合文中提供的资源和技巧,能够进一步提升JavaScript的编程能力和开发效率。

    JS中数组重排序方法

    1.数组中已存在两个可直接用来重排序的方法:reverse()和sort()。 reverse()和sort()方法的返回值是经过排序后的数组。reverse()方法会反转数组项的顺序: var values=[1,2,3,4,5]; values.reverse(); ...

    js判断数组是否相等的方法

    在JavaScript中,判断两个数组是否相等是一个常见的需求,尤其在处理数据比较或者验证时。根据标题和描述,我们可以区分两种不同的场景: 1. **数组完全相等**:在这种情况下,不仅要求数组中的元素相同,而且元素...

    Javascript实现数组中的元素上下移动

    我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没...

    JavaScript 中有关数组对象的方法(详解)

    以上就是JavaScript中数组对象的一些主要方法,熟练掌握这些方法能极大地提升你在处理数组数据时的效率和代码的简洁性。在实际编程中,根据具体需求灵活运用这些方法,可以实现各种复杂的数组操作。

Global site tag (gtag.js) - Google Analytics