Js数组排序

来源:http://www.chinese-glasses.com 作者:Web前端 人气:108 发布时间:2020-04-07
摘要:时间: 2019-10-17阅读: 143标签: 排序 首先要先了解在函数本身会有一些自己的属性,比如: sort() 方法是最强大的数组方法之一。 length :形参的个数; name :函数名; prototype :类的原型

时间: 2019-10-17阅读: 143标签: 排序

首先要先了解在函数本身会有一些自己的属性,比如:

sort()方法是最强大的数组方法之一。

  • length:形参的个数;
  • name:函数名;
  • prototype:类的原型,在原型上定义的方法都是当前这个类的实例的公有方法;
  • __proto__:把函数当做一个普通对象,指向Function这个类的原型

数组排序

函数在整个JavaScript中是最复杂也是最重要的知识,对于一个函数来说,会存在多种角色:

sort()方法以字母顺序对数组进行排序:

function Fn() { var num = 500; this.x = 100;}Fn.prototype.getX = function () { console.log;}Fn.aaa = 1000;var f = new Fn;f.num // undefinedf.aaa // undefinedvar res = Fn(); // res是undefined Fn中的this是window

实例

  • 角色一:普通函数,对于Fn而言,它本身是一个普通的函数,执行的时候会形成私有的作用域,然后进行形参赋值、预解析、代码执行、执行完成后内存销毁;

  • 角色二:,它有自己的实例,f就是Fn作为类而产生的一个实例,也有一个叫做prototype的属性是自己的原型,它的实例都可以指向自己的原型;

  • 角色三:普通对象Fnvar obj = {} 中的obj一样,就是一个普通的对象(所有的函数都是Function的实例),它作为对象可以有一些自己的私有属性,也可以通过__proto__找到Function.prototype

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

函数的以上三种角色,可能大多数同学对于角色一和角色二都是没有任何疑问的,不过对于角色三可能会稍有疑惑,那么画张图来理解下吧:

反转数组

图片 1函数作为普通对象.png

reverse()方法反转数组中的元素。

var ary = [12, 23, 34];ary.slice();

您可以使用它以降序对数组进行排序:

以上两行简单的代码的执行过程为:ary这个实例通过原型链的查找机制找到Array.prototype上的slice方法,让找到的slice方法执行,在执行slice方法的过程中才把ary数组进行了截取。

实例

注意slice方法执行之前有一个在原型上查找的过程(当前实例中没有找到,再根据原型链查找)。

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

当知道了一个对象调用方法会有一个查找过程之后,我们再看:

默认地,sort()函数按照字符串顺序对值进行排序。

var obj = {name:'iceman'};function fn() { console.log; console.log(this.name);}fn(); // this --> window// obj.fn(); // Uncaught TypeError: obj.fn is not a functionfn.call;

该函数很适合字符串("Apple" 会排在 "Banana" 之前)。

call方法的作用:首先寻找call方法,最后通过原型链在Function的原型中找到call方法,然后让call方法执行,在执行call方法的时候,让fn方法中的this变为第一个参数值obj,最后再把fn这个函数执行。

不过,如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。

模拟Function中内置的call方法,写一个myCall方法,探讨call方法的执行原理

正因如此,sort()方法在对数值排序时会产生不正确的结果。

function sum(){ console.log;}function fn(){ console.log;}var obj = {name:'iceman'};Function.prototype.myCall = function  { // myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名 // 1、让fn中的this关键字变为context的值->obj // 让this这个函数中的"this关键字"变为context // eval(this.toString().replace("this","obj")); // 2、让fn方法在执行 // this();};fn.myCall;// myCall方法中原来的this是fnsum.myCall;// myCall方法中原来的this是sum

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

fn.myCall; 这行代码执行的时候,根据this的寻找规律,在myCall方法前面有".",那么myCall中的this就是fn。执行myCall的方法,在第一步会将方法体中this换为传入的对象,并且执行原来的this, 注意:是执行原来的this(我在学这一块的时候这里理解了好久),在本例中就是执行fn

实例

看完以上那段话是不是有些懵逼了呢?哈哈,没事,接下来看下面例子,理解一下。

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a - b}); 
function fn1() { console.log;}function fn2() { console.log;}

使用相同的技巧对数组进行降序排序:

2.3.1、输出一
fn1.call; // 1

首先fn1通过原型链查找机制找到Function.prototype上的call方法,并且让call方法执行,此时call这个方法中的this就是要操作的fn1。在call方法代码执行的过程过程中,首先让fn1中的“this关键字”变为fn2,然后再让fn1这个方法执行。

注意:在执行call方法的时候,fn1中的this的确会变为fn2,但是在fn1的方法体中输出的内容中并没有涉及到任何和this相关的内容,所以还是输出1.

实例

2.3.2、输出二
fn1.call.call; // 2

首先fn1通过原型链找到Function.prototype上的call方法,然后再让call方法通过原型再找到Function原型上的call(因为call本身的值也是一个函数,所以同样可以让Function.prototype),在第二次找到call的时候再让方法执行,方法中的thisfn1.call,首先让这个方法中的this变为fn2,然后再让fn1.call执行。

这个例子有点绕了,不过一步一步来理解。在最开始的时候,fn1.call.call 这行代码的最后一个call中的this是fn1.call,根据前面的理解可以知道 fn1.call 的原理大致为:

Function.prototype.call = function  { // 改变fn中的this关键字 // eval; // 让fn方法执行 this(); // 此时的this就是fn1};

将上面的代码写为另一种形式:

Function.prototype.call = test1;function test1  { // 改变fn中的this关键字 // eval; // 让fn方法执行 this(); // 此时的this就是fn1};

我们知道,这两种形式的写法的作用是一样的。那么此时可以将 fn1.call.call 写成 test1.callcall中的的this就是test1

Function.prototype.call = function  { // 改变fn中的this关键字 // eval; // 让fn方法执行 this(); // 此时的this就是test1};

注意:此时call中的的this就是test1

然后再将call中this替换为fn2,那么test1方法变为:

Function.prototype.call = function  { // 省略其他代码 fn2(); };

所以最后是fn2执行,所以最后输出2。

首先补充严格模式这个概念,这是ES5中提出的,只要写上:

"use strict"

就是告诉当前浏览器,接下来的JavaScript代码将按照严格模式进行编写。

function fn() { console.log;}fn.call(); // 普通模式下this是window,在严格模式下this是undefinedfn.call; // 普通模式下this是window,在严格模式下this是nullfn.call(undefined); // 普通模式下this是window,在严格模式下this是undefined

apply方法和call方法的作用是一模一样的,都是用来改变方法的this关键字,并且把方法执行,而且在严格模式下和非严格模式下,对于第一个参数是null/undefined这种情况规律也是一样的,只是传递函数的的参数的时候有区别。

function fn(num1, num2) { console.log(num1 + num2); console.log;}fn.call(obj , 100 , 200);fn.apply(obj , [100, 200]); 

call在给fn传递参数的时候,是一个个的传递值的,而apply不是一个个传的,而是把要给fn传递的参数值同一个的放在一个数组中进行操作,也相当于一个个的给fn的形参赋值。

bind方法和apply、call稍有不同,bind方法是事先把fn的this改变为我们要想要的结果,并且把对应的参数值准备好,以后要用到了,直接的执行即可,也就是说bind同样可以改变this的指向,但和apply、call不同就是不会马上的执行。

var tempFn = fn.bind(obj, 1, 2);tempFn();

第一行代码只是改变了fn中的this为obj,并且给fn传递了两个参数值1、2,但是此时并没有把fn这个函数给执行,执行bind会有一个返回值,这个返回值tempFn就是把fn的this改变后的那个结果。

注意:bind这个方法在IE6~8下不兼容。

定义一个数组:

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return b - a}); 
4.1.1、排序再取值法

首先先给数组进行排序(小--->大),第一个和最后一个就是我们想要的最小值和最大值。

var ary = [23, 34, 24, 12, 35, 36, 14, 25];ary.sort(function  { return a - b;});var min = ary[0];var max = ary[ary.length - 1];console.log;

比值函数

4.1.2、假设法

假设当前数组中的第一个值是最大值,然后拿这个值和后面的项逐一进行比较,如果后面某一个值比假设的还要打,说明假设错了,我们把假设的值进行替换.....

var max = ary[0], min = ary[0];for (var i = 1; i < ary.length; i++) { var cur = ary[i]; cur > max ? max = cur : null; cur < min ? min = cur : null;}console.log;

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

4.1.3、Math中的max/min方法实现

直接使用Math.min

var min = Math.min;console.log; // NaNconsole.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));

直接使用Math.min的时候,需要把待比较的那堆数一个个的传递进去,这样才可以得到最后的记过,一下放一个ary数组进去是不可以的。

尝试:使用eval

var max = eval("Math.max(" + ary.toString;console.log;var min = eval("Math.min(" + ary.toString;console.log;

"Math.max(" + ary.toString" --> "Math.max(23,34,24,12,35,36,14,25)"首先不要管其他的,先把我们最后要执行的代码都变为字符串,然后把数组中的每一项的值分别的拼接到这个字符串中。

eval:把一个字符串变为JavaScript表达式执行例如:eval("12+23+34+45") // 114

通过apply调用Math中的max/min

var max = Math.max.apply(null, ary); var min = Math.min.apply(null, ary);console.log;

在非严格模式下,给apply的第一个参数为null的时候,会让max/min中的this指向window,然后将ary的参数一个个传给max/min。

现在模拟一个场景,进行某项比赛,评委打分后,要求去掉一个最高分和最低分,剩下分数求得的平均数即为最后分数。

可能很多同学会想到用,写一个方法,让后接收所有的分数,然后用函数的内置属性arguments,把arguments调用sort方法排序,然后......,但是要注意,arguments并不是真正的数组对象,它只是伪数组集合而已,所以直接调用用arguments调用sort方法是会报错的:

arguments.sort(); // Uncaught TypeError: arguments.sort is not a function

那么这时候可不可以先将arguments转换为一个真正的数组呢,然后再进行操作呢,按照这个思想,我们自己实现一个实现题目要求的业务方法:

function avgFn() { // 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来 var ary = []; for (var i = 0; i < arguments.length; i++) { ary[ary.length] = arguments[i]; } // 2、给数组排序,去掉开头和结尾,剩下的求平均数 ary.sort(function  { return a - b; }); ary.shift(); ary.pop(); return (eval(ary.join / ary.length).toFixed;}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);console.log;

我们发现在自己实现的avgFn方法中有一个步骤为将arguments克隆出来生成是一个数组。如果对数组的slice方法比较熟悉的话,可以知道当slice方法什么参数都不传的时候就是克隆当前的数组,可以模拟为:

function mySlice () { // this->当前要操作的这个数组ary var ary = []; for (var i = 0; i < this.length; i++) { ary[ary.length] = this[i]; } return ary;};var ary = [12, 23, 34];var newAry = mySlice;console.log;

所以在avgFn方法中的将arguments转换为数组的操作可以通过call方法来借用Array中的slice方法。

function avgFn() { // 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来 // var ary = Array.prototype.slice.call(arguments); var ary = [].slice.call(arguments); // 2、给数组排序,去掉开头和结尾,剩下的求平均数 ....}

我们现在的做法是先将arguments转换为数组,然后再操作转换之后的数组,那么可以不可以直接就用arguments而不要先转换为数组呢? 当然是可以的,通过call来借用数组的方法来实现。

function avgFn() { Array.prototype.sort.call(arguments , function  { return a - b; }); [].shift.call(arguments); [].pop.call(arguments); return (eval([].join.call(arguments, '+')) / arguments.length).toFixed;}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);console.log;

在4.2中提到了借用数组的slice方法将类数组对象转换为数组,那么通过getElementsByTagName等方法获取的类数组对象是不是也可以借用slice方法来转换为数组对象呢?

var oLis = document.getElementsByTagName;var ary = Array.prototype.slice.call;console.log;

在标准浏览器下,的确可以这么用,但是在IE6~8下就悲剧了,会报错:

SCRIPT5014: Array.prototype.slice: 'this' 不是 JavaScript 对象 

那么在IE6~8下就只能通过循环一个个加到数组中了:

for (var i = 0; i < oLis.length; i++) { ary[ary.length] = oLis[i];}

注意对于arguments借用数组的方法是不存在任何兼容性问题的。

基于IE6~8和标准浏览器中的区别,抽取出类数组对象转换为数组的工具类:

function listToArray { var ary = []; try { ary = Array.prototype.slice.call; } catch  { for (var i = 0; i < likeAry.length; i++) { ary[ary.length] = likeAry[i]; } } return ary;}

这个工具方法中用到了浏览器的异常信息捕获,那么在这里也介绍一下吧。

console.log;

当我们输出一个没有定义的变量的时候会报错:Uncaught ReferenceError: num is not defined,在JavaScript中,本行报错,下面的代码都不再执行了。

但是如果使用了try..catch捕获异常信息的话,则不会影响下面的代码进行执行,如果try中的代码执行出错了,会默认的去执行catch中的代码。

try { console.log;} catch  { // 形参必须要写,我们一般起名为e console.log(e.message); // --> num is not defined 可以收集当前代码报错的原因}console.log;

所以try...catch的使用格式为:

try { // <js code>} catch  { // 如果代码报错执行catch中的代码} finally { // 一般不用:不管try中的代码是否报错,都要执行finally中的代码}

如果有时候既想捕获到信息,又不想让下面的diamante执行,那么应该怎么做呢?

try { console.log;} catch  { // console.log(e.message); // --> 可以得到错误信息,把其进行统计 // 手动抛出一条错误信息,终止代码执行 throw new Error('当前网络繁忙,请稍后再试'); // new ReferenceError --> 引用错误 // new TypeError --> 类型错误 // new RangeError --> 范围错误}console.log;

个人公众号:分享更多的前端技术和生活感悟

图片 2个人公众号.png

比较函数应该返回一个负,零或正值,这取决于参数:

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

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

实例:

当比较 40 和 100 时,sort()方法会调用比较函数 function(40,100)。

该函数计算 40-100,然后返回 -60(负值)。

排序函数将把 40 排序为比 100 更低的值。

您可以使用下面的代码片段来测试数值和字母排序:

button onclick="myFunction1()"以字母顺序排序/buttonbutton onclick="myFunction2()"以数字顺序排序/buttonp /pscriptvar points = [40, 100, 1, 5, 25, 10];document.getElementById("demo").innerHTML = points;function myFunction1() { points.sort(); document.getElementById("demo").innerHTML = points;}function myFunction2() { points.sort(function(a, b){return a - b}); document.getElementById("demo").innerHTML = points;}/script

以随机顺序排序数组实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return 0.5 - Math.random()}); 

查找最高(或最低)的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过,在对数组进行排序之后,您能够使用索引来获得最高或最低值。

本文由10bet发布于Web前端,转载请注明出处:Js数组排序

关键词:

最火资讯