http://www.f-z.cn/id/212
在实际的业务当中，很多时候要对定义好的数组重新排序。在JavaScript中自带了两个方法，可以对数组进行排序操作。这两个方法就是 sort() 和 reverse() 。今天就来学习这两个方法相关的知识。 sort()方法 sort()方法对数组的元素做原地的排序，并返回这个数组。默认情况下，sort()方法是按升序排列数组项。即最小的值位于最前面，最大的值排列在最后面。为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。 先来看一个简单的示例： var arr = [ 'hello' , 'jame' , 'Jack' , 'dog' ] ; // 定义一个数组 console . log (arr . sort ( ) ) ; // ["Jack", "dog", "hello", "jame"] 正如前面所言，sort()方法未调用任何参数时，是按升序排列的，也就是按字母的顺序排列，所以我们看到结果也是正确的。 接下来，再看一个数字的数组排列的示例 var arr = [ 1 , 5 , 10 , 22 ] ; // 定义一个数组 console . log (arr . sort ( ) ) ; // [1, 10, 22, 5] 可见，即使示例中数组的顺序没有任何问题，但sort()方法对数组进行重新排序操作之后，顺序反而不对了。这究竟是为何呢？ 查了相关文档才知道，sort()方法：如果省略参数，数组项会先根据toString()函数将其值转换成字符串在进行比较，是按UNICODE进行比较的，然后根据这个进行排序。正如最前面的示例，"Jack"会排在"dog"前面。当数字进行排序的时候，"5"会出现在"10"和"22"之后，因为他们先会被转换为字符串，而“10”和“22”都比“5”要靠前。 我们可以使用charCodeAt()来验证一下： "Jack" . charCodeAt ( ) == > 74 "dog" . charCodeAt ( ) == > 100 "5" . charCodeAt ( ) == > 53 "10" . charCodeAt ( ) == > 49 "22" . charCodeAt ( ) == > 50 如此一来，这不是最佳方案。幸好，sort()方法可以接受一个比较函数compareFunction作为参数，以便我们指定哪个值位于哪个值的前面。 如果指明了compareFunction，那么数组会按照调用该函数的返回值进行排序。比较函数compareFunction接收两个参数a和b，a和b是两个将要被比较的元素： compareFunction(a,b)返回的值小于0：那么a就小于b，也就是说a排在了b的前面 compareFunction(a,b)返回的值大于0: 那么a就大于b，也就是说a排在了b的后面 compareFunction(a,b)返回的值等于0：那么a就等于b，也就是说a和b的位置保持不变 compareFunction(a,b)函数： function compareFunction (a , b ) { if (a < b ) { return - 1 ; // a排在b的前面 } else if (a > b ) { return 1 ; // a排在b的后面 } else { return 0 ; // a和b的位置保持不变 } } 这个函数可适用于大多数数据类型，只要将compareFunction(a,b)函数作为参数传给sort()方法即可。因到前面的示例： var arr = [ 1 , 5 , 10 , 22 ] ; // 定义一个数组 arr . sort (compareFunction ) ; // 将compareFunction函数作为参数传给 sort() console . log (arr ) ; // [1, 5, 10, 22] 数组arr仍然保持了正确的升序排列。其实可以通过compareFunction(a,b)对数组作降序排列，只需要将compareFunction函数的返回值做个调整即可： function compareFunction (a , b ) { if (a < b ) { return 1 ; // a排在b的后面 } else if (a > b ) { return - 1 ; // a排在b的前面 } else { return 0 ; // a 和 b 保持位置不变 } } var arr = [ 1 , 5 , 10 , 22 ] ; //定义一个数组 arr . sort (compareFunction ) ; // 将compareFunction函数作为参数传给sort() console . log (arr ) ; // [22, 10, 5, 1] 注：compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。 上面也说到了，sort()方法传入compareFunction(a,b)参数时，返回的值可能有3个，所以下面这样的写法是错误的： function compareFunction (a , b ) { return a < b ; } var arr = [ 21 , 0 , 3 , 11 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ] ; arr . sort (compareFunction ) ; console . log (arr ) ; // [5, 21, 11, 10, 9, 8, 7, 6, 4, 3, 0] 可能得的结果是 [5, 21, 11, 10, 9, 8, 7, 6, 4, 3, 0]，这并不是正确的结果，那是因为return a < b只返回了两种值 true或false，相当于1或0，而没有-1。 对于数字类型或valueOf()方法返回数值类型的对象类型，可以使用一个更简单的比较函数。 // ascSort(a,b)传给sort()，数字数组作升序排列 function ascSort (a , b ) { // a和b是数组中相邻的两个数组项 return a - b ; // 如果 return -1, 表示a小于b，a排列在b的前面 // 如果 return 1, 表示a大于b,a排列在b的后面 // 如果 return 0, 表示a等于b,a和b的位置保持不变 } // desSort(a,b)传给sort()，数字数组作降序排列 function desSort (a , b ) { // a和b是数组中相邻的两个数组项 return b - a ; // 如果 return -1, 表示b小于a，b排列在a的前面 // 如果 return 1, 表示b大于a, b排列在a的后面 // 如果 return 0, 表示 b等于a, b和a的位置保持不变 } 来看看结果是不是我们想要的结果： var arr = [ 1 , 4 , 10 , 3 ] , arr2 = [ 100 , 12 , 99 , 3 , 2 ] ; //定义数组 arr . sort (ascSort ) ; // 将ascSort函数传给sort() arr2 . sort (desSort ) ; // 将desSort函数传给sort() console . log (arr ) ; // [1, 3, 4, 10] console . log (arr2 ) ; // [100, 99, 12, 3, 2] 字符数组排列 创建一个字符串数组，并且使用sort()对字符串进行重新排序： var stringArray = [ 'blue' , 'Humpback' , 'Beluga' ] ; stringArray . sort ( ) ; console . log ( '字符串数组stringArray:' + stringArray ) ; Chrome输出的结果： 字符串数组stringArray :Beluga ,Humpback ,blue 数字字符串数组排列 创建一个数字字符串数组之后对数组进行排序，对比数字数组分别指定与不指定比较函数的结果： var numericStringArray = [ '80' , '9' , '700' ] ; function compareFunction (a , b ) { return a - b ; } console . log ( '不指定比较函数的数字字符串数组排列：' + numericStringArray . sort ( ) ) ; console . log ( '指定比较函数的数字字符串数组排列：' + numericStringArray . sort (compareFunction ) ) ; Chrome输出的结果： 不指定比较函数的数字字符串数组排列： 700 , 80 , 9 指定比较函数的数字字符串数组排列： 9 , 80 , 700 数字数组排列 创建一个数字数组之后对数组进行排序，对比数字数组分别指定与不指定比较函数的结果： var numberArray = [ 80 , 9 , 700 ] ; function compareFunction (a , b ) { return a - b ; } console . log ( '不指定比较函数的数字数组排列：' + numberArray . sort ( ) ) ; console . log ( '指定比较函数的数字数组排列：' + numberArray . sort (compareFunction ) ) ; Chrome输出的结果： 不指定比较函数的数字字符串数组排列： 700 , 80 , 9 指定比较函数的数字字符串数组排列： 9 , 80 , 700 数字和数字字符串混合数组排列 创建一个数字和数字字符串混合数组之后进行排序，对比数组分别指定与不指定比较函数的结果： var mixedNumericArray = [ '80' , '9' , '700' , 40 , 1 , 5 , 200 ] ; function compareFunction (a , b ) { return a - b ; } console . log ( '不指定比较函数的数组排列：' + mixedNumericArray . sort ( ) ) ; console . log ( '指定比较函数的数组排列' + mixedNumericArray . sort (compareFunction ) ) ; Chrome输出的结果： 不指定比较函数的数组排列： 1 , 200 , 40 , 5 , 700 , 80 , 9 指定比较函数的数组排列 1 , 5 , 9 , 40 , 80 , 200 , 700 数字数组随机排列 除了给数字数组进行升序或降序排列之外，还可以定义一个随机函数，实现数组的随机排列。定义的随机函数返回正数或者负数，并表将随机函数传给sort()方法，此时sort()方法根据随机函数返回的正负数来决定两个值之前的位置。 var randomArray = [ 9 , 0 , 23 , 8 , 3 , 5 ] ; function randomSort (a , b ) { return Math . random ( ) - 0.5 ; } console . log (randomArray . sort (randomSort ) ) ; // [8, 5, 9, 0, 23, 3] // [8, 3, 5, 0, 23, 9] // [8, 5, 0, 3, 9, 23] 对象数组排列 对于对象数组排列，我们同样需要先写一个构造函数： function objectSort (property , desc ) { //降序排列 if (desc ) { return function (a , b ) { return (a [property ] > b [property ] ) ? - 1 : (a [property ] < b [property ] ) ? 1 : 0 ; } } return function (a , b ) { return (a [property ] < b [property ] ) ? - 1 : (a [property ] > b [property ] ) ? 1 : 0 ; } } var myArray = [ { "name" : "John Doe" , "age" : 29 } , { "name" : "Anna Smith" , "age" : 24 } , { "name" : "Peter Jones" , "age" : 39 } ] console . log (myArray . sort ( objectSort ( 'name' , true ) ) ) ; // 按object中的name的降序排列 来看看Chrome输出的前后结果： 另外，只需要改变比较函数objectSort()中的desc参数值为flase，数组就会按object指定的property属性降序排列： console . log (myArray . sort ( objectSort ( 'age' , false ) ) ) ; //按objcet中的age升序排列 Chrome输出的前后结果： 除此之外，还有其的对比较函数，如下所示： function dynamicSort (property ) { var sortOrder = 1 ; if (property [ 0 ] === "-" ) { sortOrder = - 1 ; property = property . substr ( 1 ) ; } return function (a ,b ) { var result = (a [property ] < b [property ] ) ? - 1 : (a [property ] > b [property ] ) ? 1 : 0 ; return result * sortOrder ; } } console . log (myArray . sort ( dynamicSort ( 'age' ) ) ) ; // 按升序排列 console . log (myArray . sort ( dynamicSort ( '-age' ) ) ) ; // 按降序排列 上面介绍的是按一个属性进行排序，但很多时候，希望按多个属性排序，那么比较函数需要做一定的调整： function dynamicSortMultiple ( ) { var props = arguments ; return function (obj1 , obj2 ) { var i = 0 , result = 0 , numberOfProperties = props .length ; while (result === 0 && i < numberOfProperties ) { result = dynamicSort (props [i ] ) (obj1 , obj2 ) ; i ++ ; } return result ; } } myArray . sort ( dynamicSortMultiple ( 'name' , '-age' ) ) ; reverse()方法 reverse()方法相对而言要简单得多，它就是用来颠倒数组中元素的位置，并返回该数组的引用。比如我们有一个数组： var myArray = [ "Airen" , "W3cplus" , "Blog" ] ; console . log (myArray . reverse ( ) ) ; // ["Blog", "W3cplus", "Airen"] 总结 本文主要介绍了数组中元素项的排序方法。而主要详细介绍的是sort()方法。通过给sort()方法传递不同的比较函数，我们可以实现字符串数组、数字数组、数字和数字字符串混合数组、对象数组等按顺序(升序或降序)排列。 学习更多IT知识 加群：272292492
