[JS基础] JS 之数组排序

简单数组排序

这里的简单数组的定义是,数据的元素是基本的类型整型,字符型,浮点型等,而不是对象类型

排序方法就很简单,使用数组本身的sort 方法。 默认是升序排序。

看例子:

  <script>
     var jsArray = [100,2,4,30];
     jsArray.sort();
     alert(jsArray);
  </script>

输出的结果是:

100,2,30,4

和我们预想的结果不一样, 原因是默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序

针对这个方法, 需要特别注意的是:

1.数组调用sort方法后,会影响本身(而非生成新数组)

2.sort()方法默认是按字符来排序的,所以在对数字型数组排序时,不可想当然的以为会按数字大小排序!

自定义排序规则进行排序

针对上面的数字数组排序, 可以使用自定义的排序规则

就是给一个排序函数参数给sort 方法

jsArray.sort(function(a,b){return a>b?1:-1});

以上是按升序排序, 如果要按降序排,很简单:

jsArray.sort(function(a,b){return a<b?1:-1});

对象数组的排序

对象数组的排序, 一般是根据对象中的某个或多个key 对应的值进行排序。

有了上面自定义排序规则排序的介绍,对对象数组的排序就不难了。

还是举例来看:

    var  jsArray = [{id:1,score:100},
                {id:2,score:2},
                {id:3,score:4},
                {id:4,score:30}];
     jsArray.sort(function(a,b){return a["score"]>b["score"]?1:-1});
     //test
     for(var i=0;i<jsArray.length;i++)
     {
        alert(jsArray[i].score);
     }  

更多

其实自定义排序规则的这种用法并不鲜见, 在java 中进行sort 也会经常使用到这种方法,而且会经常提到一个词-- 比较器。

其实这个比较函数就是一个比较器. 之前给非开发人员介绍这个的时候, 对于"器"这个词, 他们感觉很膜拜^^.  通俗点的说法还是比较函数......

以下贴一个构造带%数据的比较器的方法:

/************************************************
* NAME:			jsDataWithPercentComparator
* DESCRIPTION:	comparate data with Percent like {key1:‘1.2%‘}
* ARGUMENTS:
*		sortField  --> one key of js object
*		sortType  -->desc or asc , default is asc
* AUTHOR: 		oscar999
*************************************************/
function getJsPercentDataComparator(sortField,sortType)
{
	var thisSortType = "asc";
	if(sortType!=null&&(sortType=="asc"||sortType=="desc"))
	{
		thisSortType = sortType;
	}
	if(thisSortType=="asc")
	{
		return function(a,b){
			var result = 0;
			if(a[sortField]!=null&&b[sortField]!=null)
			{
				var astring = a[sortField].replace(/%/,"");
				var bstring = b[sortField].replace(/%/,"");
				var afloat = parseFloat(astring);
				var bfloat = parseFloat(bstring);
				result = (afloat>bfloat)?1:-1;
			}
			return result;
		};
	}else if(thisSortType=="desc")
	{
		return function(a,b){
			var result = 0;
			if(a[sortField]!=null&&b[sortField]!=null)
			{
				var astring = a[sortField].replace(/%/,"");
				var bstring = b[sortField].replace(/%/,"");
				var afloat = parseFloat(astring);
				var bfloat = parseFloat(bstring);
				result = (afloat<bfloat)?1:-1;
			}
			return result;
		};
	}
}

调用测试:

	var array1  = [{key1:"28.2%"},{key1:"18.2%"},{key1:"38.2%"}];
	var comparator = getJsPercentDataComparator("key1",sortType);
	array1 = array1.sort(comparator);

[JS基础] JS 之数组排序

时间: 2024-11-14 12:57:04

[JS基础] JS 之数组排序的相关文章

JS基础-----JS中的分支结构及循环结构

[分支结构] 一.if-else结构 1.结构的写法:if(判断条件){ //条件为true时,执行if的{} }else{ //条件为false时,执行else的{} } 2.注意事项 ①else语句块.可以根据情况进行省略. ②if和else后面的{}可以省略,但是省略{}后,if和else后面只能跟一条语句.(所以并不建议省略{}) 3.if的()中的判断条件,支持的情况: ①Boolean:true为真,false为假: ②String:空字符串为假,所有非空字符串为真: ③Number

JS基础----&gt;js中ajax的使用

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.今天我们就简单的学习一下ajax的使用及过程. ajax的使用 先贴出大致的代码,是请求本地的一个servlet,返回json格式的数据. function ajaxTest(argument) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRe

【2017-03-28】JS基础、windows对象、history对象、location对象

一.JS基础 JS - javaScript 1.js功能: 1).进行数据的运算.2).控制浏览器的一些功能.3).控制元素(属性.内容.样式) js引用位置: 可以放在html页的任意位置. 推荐放在<html></html>后边. 也可以放在一个以js结尾的文件内,将该文件引用到html页内. 2.格式: <script type="text/javascript"> js代码 </script> 1.alert("&qu

js 基础知识 对象与数组

对象是一种无序属性的集合,每个属性都有自己的名字和值. 对象的创建有很多种,我在第一章已经说过了. 如何遍历一个对象: var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person)       //x其实是一个变量,代表的是person对象的属性{txt=txt + person[x];              //person[属性]  等

原声js基础笔记

原声js基础笔记 前端开发群: 欢迎加入. <!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </

【 js 基础 】Javascript “继承”

是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:"汽车"可以被看作是"交通工具"的一种特例.我们可以定义一个 Vehicle 类和一个 Car 类来对这种关系进行描述.Vehicle 的定义可能包含引擎.载人能力等,也就是 所有交通工具,比如飞机.火车和汽车等都有的通用的功能描述.在对 Car 类进行定义的

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

js基础知识总结(2016.11.1)

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f