模拟JavaScript的Array.sort()方法

liuyix 发布于2019-08-19 18:45 / 3339人阅读

摘要：下面重新改写上面的冒泡排序，传递一个回调函数。模拟注意第行和第行，给传递了一个参数，这是一个函数，然后在第行调用，和分别就是回调函数的两个比较值。

在JavaScript中，Array对象的sort()方法是用来排序的，但是这个方法在默认情况下可能不是我们想要的，比如对于如下数组

var arr = [2,5,10,20,7,15];

使用sort排序会得到如下结果：
[10, 15, 2, 20, 5, 7]

在不传递参数的情况下，它是按字符的Unicode编码来排序的。

为了解决这个问题，可以为sort()方法传递一个参数，这个参数ECMAScript是这么定义的：

/**
@param {function} [compareFn]
@return {Array.}
*/
Array.prototype.sort = function(compareFn) {};

参数为一个function，具体叫比较函数。我们可以改写为如下形式，传递一个比较函数：

arr.sort(function(a,b){
    return a - b;
});

a和b即是要比较的两个数，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

对于返回值的三种结果，我们可以直接使用“a-b”，这样就可以正确得到结果
[2, 5, 7, 10, 15, 20]

那么，接下来我们就来模拟一下这个方法和比较函数的实现。

首先，如果我们不用这个方法，而是自己实现排序，那么我们可以使用传统的冒泡排序方法：

function sort(array){
        for(var i=0; i array[j + 1]){
                    var temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                    // 还有比较，说明排序还未结束
                    isSorted = false;
                }
            }
            // 如果排序已经完成，跳出循环
            if(isSorted){
                break;
            }
        }
    }

这是一个循环次数最少的排序方法，但是，这个排序的适应性不强，对于字符串数组就不行了，假设有如下字符串数组，要求按字符串个数排序该如何实现？

var arry = ["aaa","aa","c","bb"."xxxxxxxx"];

这样的数组我们不得不重新写一个方法来对字符串数组进行排序，需要改动上面冒泡排序的第6行的判断条件：

if(array[j].length > array[j+1].length){}

那么，既然只需要改动这一句，我们可以把这一句作为参数传递，以后想怎么排就传什么样的参数，这个参数就是一个函数，回调函数。下面重新改写上面的冒泡排序，传递一个回调函数。

// 模拟sort()
function sort(array,fn){
    for(var i=0; i 0){
                var temp = array[j];
                array[j] = array[j + 1];
                array[j + 1] = temp;
                    isSorted = false;
                }
            }
        }
        if(isSorted){
           break;
        }
    }
}

注意第2行和第6行，给sort传递了一个fn参数，这是一个函数，然后在第6行调用，array[j]和array[j+1]分别就是回调函数的a,b两个比较值。用这个改写的方法即可对数值数组排序也可以对字符串数组排序了。

var arr = ["aaa","a","xxxxxx","abcd","ab"];
sort(arr, function (a,b) {
    return a.length - b.length;
});
console.log(arr);

输出：["a", "ab", "aaa", "abcd", "xxxxxx"]

文章首发于读你博客，原文链接http://www.mybry.com/?p=594，转载请注明出处

海外云主机云服务器 javascript的方法 javascript方法 javascript对象方法 javascript函数方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79949.html

JS专题之数组去重

摘要：将元素作为对象的键，默认键对应的值为如果对象中没有这个键，则将这个元素放入结果数组中去。前言数组去重在日常开发中的使用频率还是较高的，也是网上随便一抓一大把的话题，所以，我写这篇文章目的在于归纳和总结，既然很多人都在提的数组去重，自己到底了解多少呢。又或者是如果自己在开发中遇到了去重的需求，自己能想到更好的解决方案吗。这次我们来理一理怎么做数组去重才能做得最合适，既要考虑兼容性，...

only_do 2019-08-26 13:29 评论0 收藏0
Javascript数组系列四之数组的转换与排序Sort方法

摘要：总结我们继续了我们数组系列的文章的，今天我们主要说的就是数组的如何转换成其他数据类型，以及数组如何按照我们自己的规则去进行排序。今天我们继续来介绍 Javascirpt 数组中的方法，也是数组系列的第四篇文章，因为数组的方法众多，每篇文章我们都对数组的每个方法都有比较细致的描述，只要你能够从中成长一点点，那我们的目的就达到了，学习是一个持续的，渐进的过程。每天进步一点点，最终会有大成...

zhonghanwen 2019-08-23 11:59 评论0 收藏0
JavaScript引用类型——“Array类型”的注意要点

摘要：创建数组读取和设置数组的值创建数组创建数组的基本方式有两种使用构造函数使用数组字面量表示法对于第一种方法，如果知道数组要保存多少个项目，也可以给构造函数传递参数，比如要创建值为的数组操作符可以省略。也可以向构造函数传递包含的项。 Array 类型除了Object 之外，Array 类型也是相当常用的类型了。ECMAScript 数组的每一项可以保存任何类型的数据。且数组大小也能够动态...

AlphaWatch 2019-08-21 10:47 评论0 收藏0
[笔记] 深入理解 JavaScript Array.sort()

摘要：以上涉及到一个字符的转换问题，这里不多扩展，写一段代码运行过程做笔记中国代表字符中的第一位，是只有长度的字符输出字符长度为不确定时放入一个数组中。第一次运行后，返回值为，小于，所以的索引值未变化，。 Array.sort() 方法排序，默认为升序排序，如 1，2，3，4 这样的排列，可以传一个对比方法做为排序的参数，也可以不传，则为按照字符的逐个 unicode 排序。简单默认排序 ...

QLQ 2019-08-20 18:03 评论0 收藏0
Javascript的内置函数(ES5)-读Javascript语言精粹

摘要：的内置函数整理了一些语言精粹的方法一章的整理出的的内置方法之后还会整理标准入门的新添加的方法整理这些作用一方面是更好的理解记忆另一方面是对于类数组可以使用原型链的调用即可中的一些函数输出的为的结果因此的作用是连接数组当然可以是数字也会加入到 Javascript的内置函数(ES5) 整理了一些Javascript语言精粹的方法一章的整理出的ES5的内置方法; 之后还会整理ES6标准入门...

gekylin 2019-08-22 10:50 评论0 收藏0