JavaScript数组中sort方法

这也是一般情况下建议的方式,因为不知道不同的 js 引擎在不传递排序函数的时候,会按照什么方案进行排序。
例如:

 代码如下 复制代码

var colors = ['red', 'green', 'blue', 'yellow', 'white'];
console.log(colors.sort());    // ["blue", "green", "red", "white", "yellow"]
console.log(colors);           // ["blue", "green", "red", "white", "yellow"]

如果不传递排序函数,那么,对于字符串来说,其将按照字母顺序来进行排序,可是,如果这些字符串里面有大写小写字母混合呢?

 代码如下 复制代码

var colors = ['red', 'green', 'blue', 'Yellow', 'White'];
console.log(colors.sort());    // www.111cn.net ["White", "Yellow", "blue", "green", "red"]

怎么样,结果不一样了吧?这是因为此时按照 ASCII 编码的顺序进行排序了。

同时,另一个问题是,sort 函数作用于原数组,也即是排序的结果会覆盖排序前的数组。

然后,对于数字数组,不传递排序函数的话,会是什么结果呢?

 代码如下 复制代码

var money = [12, 3, 7.4, 200];
console.log(money.sort());    // [12, 200, 3, 7.4]

咦?并没有得到预期的结果(除非你的预期不是按数字大小),那么为什么呢?

因为在 sort 排序的时候,如果不传递排序函数,那么会先将所有的元素转换为 字符串 ,然后才会一个字一个字(ASCII,对于 true 或者 false 这类型的值都是一样的)的排序,为什么都转换成字符串,因为 JavaScript 数组中可以是任意类型的数据,所以 JavaScript 无法推断到底转换为什么类型去排序。

那么我们看看不同的数据类型,排序函数的一些写法:

数组内都是数字,或者期望按数字为主的排序方式。

 代码如下 复制代码
var money = [12, 3, 7.4, 200];
var compare = function(a, b) {return a - b;};
console.log(money.sort(compare)); // [3, 7.4, 12, 200]
//console.log(money.sort(function(a, b) {return a - b;})); // [3, 7.4, 12, 200]

这是最基础的排序函数,任何讲到 JavaScript 排序的地方,基本都会讲这个。首先取前两个元素赋值给 a b,返回 a-b 的值,如果返回负值则 a 在 b 前,等于 0 则无所谓,因为两个元素相等,返回正直,则 a 在 b 后。

对于字符串的元素来说,和数字的差不多,无非就是不同的排序函数,那如果是对象呢?

 代码如下 复制代码

var people = [
    {
        name: 'Alice',
        id: 1234
    },
    {
        name: 'Bob',
        id: 567
    }
];
var compare = function(a, b) {return a.id - b.id;}
console.log(people.sort(compare)); // Bob is before Alice now

对于元素的排序函数传递的参数都一样,两个数组中的元素,然后此处主要比较两个对象元素的 id 的值,来进行排序的。

可是如果如下面这种情况呢?

 代码如下 复制代码

var everything = [4, 'Red', '$200', 'white', 7.4, 12, true, 0.3, false];
var compare = function(a, b) {return a - b;};
console.log(everything.sort(compare));

当排序函数进行计算的时候,由于有减法运算的参与,所以这里都会先转成数字进行计算的,但是如果是字符串的话,此处就会转换为 NaN,因为在 ECMA 规范中没有明确定义这时候应该如何进行排序,所以各个平台,也就是各个浏览器(JavaScript环境)的不同,导致最终的结果会不一定相同。大家可以自己在不同的浏览器上测试下。

下面放几个自己用的sort排序例子

 代码如下 复制代码

<html>
 <head>
  <title>数组的sort()方法</title>
  
  <script>
   /*
   sort()
   1、没有产生副本,直接引用原数组
   2、如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,
   说得更精确点,是按照字符编码的顺序进行排序。
   要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

   3、如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,
   然后返回一个用于说明这两个值的相对顺序的数字。
   比较函数应该具有两个参数 a 和 b,其返回值如下:
    若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
    若 a 等于 b,则返回 0。
    若 a 大于 b,则返回一个大于 0 的值。
   
   */
  
   var arr = [2,4,8,1,22,3];
   var arrSort= arr.sort();//没有正确排序,数组先转化为字符串,然后再排序
   document.write("默认的排序数组为:" + arrSort);//1,2,22,3,4,8
   document.write("<br/>");
   
   //比较函数
   function mysort(a,b){
    return a-b;
   }
   
   var arrSort2 = arr.sort(mysort);//传入比较函数
   document.write("传入比较参数的数组为:" + arrSort2);//正确排序
   document.write("<br/>");
   
   document.write("原数组为:" + arr);
   
  </script>

 </head>
 
 <body>
  <div id="time"></div>
 </body>

</html>

 

时间: 2024-10-27 22:47:15

JavaScript数组中sort方法的相关文章

Javascript数组中push方法用法分析_javascript技巧

本文实例讲述了Javascript数组中push方法用法.分享给大家供大家参考,具体如下: 看下面代码: var o = { 1:'a' ,2:'b' ,length:2 ,push:Array.prototype.push }; o.push('c'); Q:o现在内部的值是什么样子? 我的第一反应是排斥,为什么要研究不合理情况下[解释引擎]的行为?但是这种推论有时候又很吸引人,于是我回来的时候仔细思考了下,发现其实很简单. 对于push这个方法,我条件反射地想到的就是栈,[数据结构的经典栈]

javascript中数组的sort()方法的使用介绍

 数组的sort()方法用于排序,在本文将为大家介绍下javascript中sort()方法的具体使用 代码如下: <html>  <head>  <title>数组的sort()方法</title>    <script>  /*  sort()  1.没有产生副本,直接引用原数组  2.如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,  说得更精确点,是按照字符编码的顺序进行排序.  要实现这一点,首先应把数组的元素都转换成

javascript中数组的sort()方法的使用介绍_javascript技巧

复制代码 代码如下: <html> <head> <title>数组的sort()方法</title> <script> /* sort() 1.没有产生副本,直接引用原数组 2.如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序, 说得更精确点,是按照字符编码的顺序进行排序. 要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. 3.如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值, 然后返

JavaScript 数组- Array的方法总结(推荐)_javascript技巧

JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下 一.创建Array的方法 var colors=new Array(); var colors=new Array(3);//创建一个长度为3的数组 var colors=new Array("red","blue")//创建一个数组["red","blue"] 当然,上面的new可以省略不写,如 var co

js拆分字符串并将分割的数据放到数组中的方法

  这篇文章主要介绍了js拆分字符串并将分割的数据放到数组中的方法,涉及javascript中split方法及数组的操作技巧,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 var splitArray = new Array(); var string="太平洋.大西洋.印度洋.北冰洋"; var regex = /./; splitArray=string.split(regex); for(i=0; i < splitArray.length; i++){ docum

js拆分字符串并将分割的数据放到数组中的方法_javascript技巧

本文实例讲述了js拆分字符串并将分割的数据放到数组中的方法.分享给大家供大家参考.具体实现方法如下: var splitArray = new Array(); var string="太平洋.大西洋.印度洋.北冰洋"; var regex = /./; splitArray=string.split(regex); for(i=0; i < splitArray.length; i++){ document.write(splitArray[i] + "<br&

javascript数组遍历的方法实例分析_javascript技巧

本文实例讲述了javascript数组遍历的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a = [1,2,3,4,5,6]; var b = a.

JS教程:Chrome对数组的sort方法优化

var a = 0, b = 0; [0, 0].sort(function() { a = 1; return 0; }); [0, 1].sort(function() { b = 1; return 0; }); alert(a === b); // true or false ? 上面的代码,除了 Chrome 输出 false, 其它浏览器皆为 true. 原因是 Chrome 对数组的 sort 方法进行了优化: function sort(comparefn) { var cust

Javascript 更新 JavaScript 数组的 uniq 方法_javascript技巧

上次写的一篇<JavaScript 数组的 uniq 方法>,发现代码的问题还是存在.比如如果数组内有 undefined 元素就无法过滤等. 昨天看见 Lazy 兄弟重新更新了函数,现在他是这样子写的: Array.prototype.uniq = function() {     var resultArr = [],         returnArr = [],         origLen = this.length,         resultLen;     function