html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

Javascript 数组排序详解_基础知识_

[ ] 已经帮助:人解决问题

如果你接触javascript有一段时间了,你肯定知道数组排序函数sort,sort是array原型中的一个方法,即array.prototype.sort(),sort(compareFunction),其中compareFunction是一个比较函数,下面我们看看来自Mozilla MDN 的一段描述:9qJHTML5中文学习网 - HTML5先行者学习网
If compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in lexicographic (“dictionary” or “telephone book,” not numerical) order. For example, “80″ comes before “9″ in lexicographic order, but in a numeric sort 9 comes before 80.9qJHTML5中文学习网 - HTML5先行者学习网

下面看些简单的例子:9qJHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
9qJHTML5中文学习网 - HTML5先行者学习网
// Output [1, 2, 3]9qJHTML5中文学习网 - HTML5先行者学习网
console.log([3, 2, 1].sort());9qJHTML5中文学习网 - HTML5先行者学习网

// Output ["a", "b", "c"]9qJHTML5中文学习网 - HTML5先行者学习网
console.log(["c", "b", "a"].sort());9qJHTML5中文学习网 - HTML5先行者学习网

// Output [1, 2, "a", "b"]9qJHTML5中文学习网 - HTML5先行者学习网
console.log(["b", 2, "a", 1].sort());9qJHTML5中文学习网 - HTML5先行者学习网

9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网

从上例可以看出,默认是按字典中字母的顺序来排序的。9qJHTML5中文学习网 - HTML5先行者学习网

幸运的是,sort接受一个自定义的比较函数,如下例:9qJHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
9qJHTML5中文学习网 - HTML5先行者学习网
function compareFunction(a, b) {9qJHTML5中文学习网 - HTML5先行者学习网
 if( a > b) {9qJHTML5中文学习网 - HTML5先行者学习网
  return -1;9qJHTML5中文学习网 - HTML5先行者学习网
 }else if(a < b) {9qJHTML5中文学习网 - HTML5先行者学习网
  return 1;9qJHTML5中文学习网 - HTML5先行者学习网
 }else {9qJHTML5中文学习网 - HTML5先行者学习网
  return 0;9qJHTML5中文学习网 - HTML5先行者学习网
 }9qJHTML5中文学习网 - HTML5先行者学习网
}9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs ["zuojj", "Benjamin", "1"] 9qJHTML5中文学习网 - HTML5先行者学习网
console.log(["Benjamin", "1", "zuojj"].sort(compareFunction));9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网

排序完我们又有个疑问,如何控制升序和降序呢?9qJHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
9qJHTML5中文学习网 - HTML5先行者学习网
function compareFunction(flag) {9qJHTML5中文学习网 - HTML5先行者学习网
 flag = flag ? flag : "asc";9qJHTML5中文学习网 - HTML5先行者学习网
 return function(a, b) {9qJHTML5中文学习网 - HTML5先行者学习网
  if( a > b) {9qJHTML5中文学习网 - HTML5先行者学习网
   return flag === "desc" ? -1 : 1;9qJHTML5中文学习网 - HTML5先行者学习网
  }else if(a < b) {9qJHTML5中文学习网 - HTML5先行者学习网
   return flag === "desc" ? 1 : -1;9qJHTML5中文学习网 - HTML5先行者学习网
  }else {9qJHTML5中文学习网 - HTML5先行者学习网
   return 0;9qJHTML5中文学习网 - HTML5先行者学习网
  }9qJHTML5中文学习网 - HTML5先行者学习网
 };9qJHTML5中文学习网 - HTML5先行者学习网
}9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs ["1", "Benjamin", "zuojj"] 9qJHTML5中文学习网 - HTML5先行者学习网
console.log(["Benjamin", "1", "zuojj"].sort(compareFunction()));9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs ["zuojj", "Benjamin", "1"] 9qJHTML5中文学习网 - HTML5先行者学习网
console.log(["Benjamin", "1", "zuojj"].sort(compareFunction("desc")));9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网

comparFunction的排序规则是这样的:9qJHTML5中文学习网 - HTML5先行者学习网
1.If it returns a negative number, a will be sorted to a lower index in the array.9qJHTML5中文学习网 - HTML5先行者学习网
2.If it returns a positive number, a will be sorted to a higher index.9qJHTML5中文学习网 - HTML5先行者学习网
3.And if it returns 0 no sorting is necessary.9qJHTML5中文学习网 - HTML5先行者学习网

下面我们来看看摘自Mozilla MDN上的一段话:9qJHTML5中文学习网 - HTML5先行者学习网
The behavior of the sort method changed between JavaScript 1.1 and JavaScript 1.2.为了解释这段描述,我们来看个例子:9qJHTML5中文学习网 - HTML5先行者学习网

In JavaScript 1.1, on some platforms, the sort method does not work. This method works on all platforms for JavaScript 1.2.9qJHTML5中文学习网 - HTML5先行者学习网

In JavaScript 1.2, this method no longer converts undefined elements to null; instead it sorts them to the high end of the array.详情请戳这里。9qJHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
9qJHTML5中文学习网 - HTML5先行者学习网
var arr = [];9qJHTML5中文学习网 - HTML5先行者学习网
arr[0] = "Ant";9qJHTML5中文学习网 - HTML5先行者学习网
arr[5] = "Zebra";9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs ["Ant", 5: "Zebra"] 9qJHTML5中文学习网 - HTML5先行者学习网
console.log(arr);9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs 69qJHTML5中文学习网 - HTML5先行者学习网
console.log(arr.length);9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs "Ant*****Zebra"9qJHTML5中文学习网 - HTML5先行者学习网
console.log(arr.join("*"));9qJHTML5中文学习网 - HTML5先行者学习网
//排序9qJHTML5中文学习网 - HTML5先行者学习网
var sortArr = arr.sort();9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs ["Ant", "Zebra"] 9qJHTML5中文学习网 - HTML5先行者学习网
console.log(sortArr);9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs 69qJHTML5中文学习网 - HTML5先行者学习网
console.log(sortArr.length);9qJHTML5中文学习网 - HTML5先行者学习网
//Outputs "Ant*Zebra****"9qJHTML5中文学习网 - HTML5先行者学习网
console.log(sortArr.join("*"));9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网
9qJHTML5中文学习网 - HTML5先行者学习网

希望本文对你学习和了解sort()方法有帮助,文中不妥之处还望批评斧正。9qJHTML5中文学习网 - HTML5先行者学习网

参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort9qJHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助