JavaScript中对数组与对象数组进行排序-蒲公英云

一、对数组进行排序：sort()

我们知道，在js中，我们可以采用sort()方法对数组进行排序，但是它并不是万能的，下面就具体剖析下：

1、sort()方法说明

该方法以字母顺序对数组进行排序，如下：

let fruits = ["Banana", "Orange", "Bpple", "Mango"];
fruits.sort();
fruits // ["Apple", "Banana", "Mango", "Orange"]

2、说明：

sort()是从小到大排序，果我们想要从大到小的顺序排列该如何解决呢？利用reverse()来解决！具体实现步骤如下：

1>、先采用sort()进行排序；

2>、然后采用reverse()方法将排好序的数组进行反转。

reverse()：反转数组

具体代码实现如下：

fruits.sort(); // 对 fruits 中的元素进行排序
fruits.reverse();
fruits // ["Orange", "Mango", "Banana", "Apple"]

上面是对字符串进行排序，那么如果数组数据成员的类型是Number（即数值型）会出现怎样的结果呢？看下面的

一个示例：

let arr3 = [240, 25, 10, 300, 310];
// 排序
arr3.sort();
arr3 // [10, 240, 25, 300, 310]

从结果得知，并不是我们想象中的结果。为什么会这样呢？

因为sort()是对字符串进行排序。但是如果数组元素为数字Number类型，会出错，因为它与字符串比较大小的规则不一样。字符

串排序(比较大小)的规则：

字符串按字符在unicode中的码位(ascall码值)来比较大小。从第一个依次对应往后比,直到找到不相同的字符，然后拿出

其 ascall码值比较以此来决胜~

下面以具体的示例（arr3）来说明具体演示下：

如果数字按照字符串来排序，则 “25” 大于 “240”，因为 “5” 大于 “4”。所以，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

arr3.sort(function(a, b) {
    return a - b
});
// 此时  
arr3 // [10, 25, 240, 300, 310]
// 想要降序排序,可以这样改:
arr3.sort(function(a, b) {
        return b - a
});
arr3 // [310, 300, 240, 25, 10]

比值函数原理分析:

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数a与b的大小。

function(a, b) {
    return a - b
}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。举例说明：

arr3数组中的，240与25

当比较 240 和 25 时，sort() 方法会调用比较函数 function(240,25)。该函数计算 240-25，然后返回 215（正值）排序函数将把

240 排序为比 25 更高的值。

二、以随机顺序排序数组

在实际项目中,假设有一个列表展示，每次进页面需要展示不同的数据—>即进行数据刷新（达到更新的目的）,利用随机数组排序

能达到需求.不过这个实时刷新一般由后端实现，无须前端去关心。

arr3.sort(function(a, b) {
    return 0.5 - Math.random()
        });
arr3

三、查找数组中的最值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。不过，在对数组进行排序之后，能够使用索引来获得最高或最低

值。如果仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

改进的方法：Math.max() / Math.min()求最值

可以使用 Math.max.apply 来查找数组中的最高值：

// 可以使用 Math.max.apply 来查找数组中的最高值：
function myArrayMax(arr) {
        return Math.max.apply(null, arr);
}
// 可以使用 Math.min.apply 来查找数组中的最低值：
function myArrayMax(arr) {
        return Math.min.apply(null, arr);
}

Math.max 参数里面不支持Math.max([param1,param2,…]) 也就是数组。但是它支持Math.max(param1,param2,…)。所以的话，

利用apply()方法与es6中的数组扩展符（…）来解决Math.max/Math.min参数的问题。

apply():除了改变this的指向，它还有个巧妙的用处，可以将一个数组默认的转换为一个参数列表：([param1,param2,param3] 转

换为 param1,param2,param3) 。

es6扩展具体看这里：https://blog.csdn.net/Syleapn/article/details/98510550

所以的话：Math.max(1,2,3) <=> Math.max.apply(null,[1,2,3])

                                           <=> Math.max(...\[1,2,3\])

这块在调用的时候第一个参数给了一个null，这个是因为没有对象去调用这个方法，我只需要用这个方法帮我运算,得到返回的结

果就行,.所以直接传递了一个null过去。

四、对象数组进行排序

//JavaScript 数组经常会包含对象：
let object_array = [{
        name: "kali",
        age: 28
    },
    {
        name: "Sida",
        age: 12
    },
    {
        name: "weilian",
        age: 100
    }
]

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对对象数组进行排序。

解决方法是通过比较函数来对比属性值：

// 比较数值属性
            object_array.sort(function(a, b) {
                return a.age - b.age
            });
            object_array
            console.log(object_array)
            // 比较字符串属性
            object_array.sort(function(a, b) {
                // 先要全部转换为大写或小写字母,由于用到了字符的ASCII
                // 不转换就会有问题导致~
                // 转化为小写字母
                var x = a.name.toLowerCase();
                var y = b.name.toLowerCase();
                // 或转化为大写字母
                // var x = a.name.toUpperCase();
                // var y = b.name.toUpperCase();
                // 
                if (x < y) {
                    return -1;
                }
                if (x > y) {
                    return 1;
                }
                return 0;
            });