【JS笔记】JavaScript sort()方法使用及原理

news/2024/7/19 13:44:11 标签: JavaScript, js, sort()

JavaScript_sort_0">JavaScript sort()方法:

sort()方法:使数组中的元素按照一定顺序排列

语法格式:

Array.sort(function());

参数说明:

Array(必选项):任意数组对象。

function()(可选项):规定排序顺序。

使用方法:

如果不指定方法函数function(),则按照Unicode码顺序排列:

Array.sort();

例1:Array数组均为字母型字符串,则按字母顺序排列:

var arr = ['bc','ad','ba','fks','ee'];
arr.sort();
alert(arr);
//输出:ad,ba,bc,ee,fks

例2:Array数组均为数字或数字型字符串,则按数字顺序排列:

var arr = ['18','12','87',64,642];
arr.sort();
alert(arr);
//输出:12,18,64,642,87

例3:Array数组均为字母型字符串、数字或数字型字符串,则先排数字再排字母:

var arr = ['bvsd','hs','87',64,'81'];
arr.sort();
alert(arr);
//输出:64,81,87,bvsd,hs

分析从上面3个例题可以发现,如果我们直接使用Array.sort()方法,不写方法函数,那它是按照Unicode码顺序进行排列的,但这种排列方式我们一般并不会去使用。

如果指定方法函数function(),则按照方法函数所指定的排序方法排列:

Array.sort(function(a,b));

方法函数function有两个参数a和b,通过比较两个值的大小,然后返回比较的结果,用于表明用何种方法进行排序。

  • 负值(a<b):如果返回一个小于零的数,数组将按照升序排序。
  • 零(a=b): 如果返回一个等于零的数,即两个参数相等。
  • 正值(a>b):如果返回一个大于零的数,数组将按照降序排序。

简单的来说就是:

  • 若:return a-b; 表示数组将按照升序排序。
  • 若:return a=b; 表示数组不进行排序。
  • 若:return b-a; 表示数组将按照降序排序。

例1:Array数组均为数字或数字型字符串,则按指定的规则顺序:

var arr = ['87',64,'81',27,21];
arr.sort(function(a,b){return a-b});
alert(arr);
//输出:21,27,64,81,87
var arr = ['87',64,'81',27,21];
function xmx(a,b){
	return b-a;
}
alert(arr.sort(xmx));
//输出:87,81,64,27,21

例2:Array数组含有字母型字符串,则不进行任何排序操作:

var arr = ['87','da',64,'81','dg'];
arr.sort(function(a,b){return a-b});
alert(arr);
//输出:87,da,64,81,dg
var arr = ['ad','da','bs','cs','dg'];
function xmx(a,b){
	return b-a;
}
alert(arr.sort(xmx));
//输出:ad,da,bs,cs,dg

分析:从以上例子可以看出只有数字和数字型字符串才能进行比较并按一定规则进行排序。

原理分析:

var arr = [8,3,9,4];
function xmx(a,b){
	return a-b;
}
console.log(arr.sort(xmx));
var arr = [8,3,9,4];
function xmx(a,b){
	var ls = a-b;
	console.log(a+'-'+b+'='+ls);
	return ls;
}
console.log(arr.sort(xmx));

控制台运行结果如图:
在这里插入图片描述
我们会发现该方法进行了5次运算。再仔细一看我们会发现他使用的是冒泡排序法进行的排序。

3-8=-5 , 说明8>3,所以3被提前了,数组变成了[3,8,9,4]

9-3=6、9-8=1,说明9>8>3,数组不变[3,8,9,4]

4-8=-4, 说明8>4,所以4被提前了,数组变成了[3,4,8,9]

4-3=1, 说明4>3,所以3被提前了,数组变成了[3,4,8,9]

  • 内容到此就结束了,如果觉得这个文章对你有所帮助,不妨给博主点个赞,你的鼓励就是作者最大的动力。

http://www.niftyadmin.cn/n/509867.html

相关文章

一些vue组件库

Element 网址&#xff1a;http://element.eleme.io/#/zh-CN github&#xff1a;https://github.com/ElemeFE/element iView 网址&#xff1a;https://www.iviewui.com/ github&#xff1a;https://github.com/iview/iview VueStrap 网址&#xff1a;http&#x1f615;/yuche.gi…

React框架

React框架 React 起源于 Facebook 的内部项目&#xff0c;起初facebook在建设instagram&#xff08;图片分享&#xff09;的时候&#xff0c;因为牵扯到一个东西叫数据流&#xff0c;那为了处理数据流并且还要考虑好性能方面的问题。对市场上的各种前端MVC框架进行了研究。然后…

【JS笔记】JavaScript splice()方法的使用

JavaScript splice()方法 splice()方法&#xff1a; 插入、删除、或者替换一个数组元素&#xff0c;然后返回被删除的元素。 语法格式&#xff1a; array.splice(index,howmany,n1,n2,,nx); 参数说明&#xff1a; index&#xff08;必选项&#xff09;&#xff1a; 该参数是开始…

React获取DOM元素-ref属性

React获取DOM元素-ref属性 类组件 通过ref给元素做标记&#xff08;react不推荐使用&#xff09; <div id"app"></div><script type"text/babel">class App extends React.Component{componentDidMount(){ //类似于vue中mountedthis.re…

【JS笔记】JavaScript prompt()方法的使用

JavaScript prompt()方法 prompt()方法&#xff1a; 用于弹出显示可提示用户进行输入的对话框&#xff0c;方法返回用户输入的字串符。 语法格式&#xff1a; prompt(msg,defaultText); 参数说明&#xff1a; msg&#xff08;可选项&#xff09;&#xff1a;需要在对话框中显示…

react中数据承载--props和state用法

react中数据承载 react中数据承载的两种方式&#xff1a; ​ props: 自己可以设置默认属性&#xff0c;也可以从外部传入属性&#xff0c;但是外部传入的属性&#xff0c;自己只能用&#xff0c;不能用来修改 ​ state: 一般由自己控制&#xff0c;自己可以进行状态的更改。 pr…

react受控组件

react受控组件 大的方面&#xff1a;react组件分为函数式组件和类组件 表单元素而言&#xff1a;分为受控组件和非受控组件 非受控组件&#xff1a; 只需要在dom元素上面通过ref进行绑定取值即可。 受控组件&#xff1a; 受到数据的控制&#xff0c;使得react成为唯一的数据源.…

【JS】Number 数字简解

文章目录代码串 eval()转整数 parseInt()转小数 parseFloat()是否为数字 isNaN()是否有限值 isFinite()前言&#xff1a;在使用JavaScript语言时&#xff0c;除了可以自定义函数外&#xff0c;还可以使用其内置函数&#xff0c;它是由JavaScript自身提供的 JavaScript中的内置函…