JavaScript中Array.prototype.sort()的详解
摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
sort() 方法对数组的元素做原地的排序,并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点(code point)排序。
语法
arr.sort([compareFunction])
参数
compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
描述
如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。数字比大小时,9 出现在 80 之前,但这里比较时数字会先被转换为字符串,所以 "80" 比 "9" 要靠前。
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries'] var scores = [, , , ];
scores.sort(); // [1, 10, 2, 21]
// Watch out that 10 comes before 2,
// because '10' comes before '2' in Unicode code point order. var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); // ['1 Word', '2 Words', 'Word', 'word']
// In Unicode, numbers come before upper case letters,
// which come before lower case letters.
如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。记 a 和 b 是两个将要被比较的元素:
- 如果
compareFunction(a, b)小于 0 ,那么 a 会被排列到 b 之前;
- 如果
compareFunction(a, b)等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
- 如果
compareFunction(a, b)大于 0 , b 会被排列到 a 之前。 compareFunction(a, b)必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
所以,比较函数格式如下:
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -;
}
if (a is greater than b by the ordering criterion) {
return ;
}
// a must be equal to b
return ;
}
希望比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列
function compareNumbers(a, b) {
return a - b;
}
sort 方法可以使用 函数表达式 方便地书写:
var numbers = [, , , , ];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]
对象可以按照某个属性排序:
var items = [
{ name: 'Edward', value: },
{ name: 'Sharpe', value: },
{ name: 'And', value: },
{ name: 'The', value: - },
{ name: 'Magnetic' },
{ name: 'Zeros', value: }
]; items.sort(function (a, b) {
if (a.value > b.value) {
return ;
}
if (a.value < b.value) {
return -;
}
// a 必须等于 b
return ;
});
示例
创建、显示及排序数组
下述示例创建了四个数组,并展示原数组。之后对数组进行排序。对比了数字数组分别指定与不指定比较函数的结果。
var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["", "", ""];
var numberArray = [, , , ];
var mixedNumericArray = ["", "", "", , , , ]; function compareNumbers(a, b)
{
return a - b;
} console.log('stringArray:', stringArray.join());
console.log('Sorted:', stringArray.sort()); console.log('numberArray:', numberArray.join());
console.log('Sorted without a compare function:', numberArray.sort());
console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); console.log('numericStringArray:', numericStringArray.join());
console.log('Sorted without a compare function:', numericStringArray.sort());
console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); console.log('mixedNumericArray:', mixedNumericArray.join());
console.log('Sorted without a compare function:', mixedNumericArray.sort());
console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
该示例的返回结果如下。输出显示,当使用比较函数后,数字数组会按照数字大小排序。
stringArray: Blue,Humpback,Beluga
Sorted: Beluga,Blue,Humpback numberArray: ,,,
Sorted without a compare function: ,,,
Sorted with compareNumbers: ,,, numericStringArray: ,,
Sorted without a compare function: ,,
Sorted with compareNumbers: ,, mixedNumericArray: ,,,,,,
Sorted without a compare function: ,,,,,,
Sorted with compareNumbers: ,,,,,,
对非 ASCII 字符排序
当排序非 ASCII 字符的字符串(如包含类似 e, é, è, a, ä 等字符的字符串)。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
return a.localeCompare(b);
}); // items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
使用映射改善排序
compareFunction 可能需要对元素做多次映射以实现排序,尤其当 compareFunction 较为复杂,且元素较多的时候,某些 compareFunction 可能会导致很高的负载。使用 map 辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来,排序后再将数组恢复。
// 需要被排序的数组
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; // 对需要排序的数字和位置的临时存储
var mapped = list.map(function(el, i) {
return { index: i, value: el.toLowerCase() };
}) // 按照多个值排序数组
mapped.sort(function(a, b) {
return +(a.value > b.value) || +(a.value === b.value) - ;
}); // 根据索引得到排序的结果
var result = mapped.map(function(el){
return list[el.index];
});
规范
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. |
| ECMAScript 5.1 (ECMA-262) Array.prototype.sort |
Standard | |
| ECMAScript 2015 (6th Edition, ECMA-262) Array.prototype.sort |
Standard |
浏览器兼容性
JavaScript中Array.prototype.sort()的详解的更多相关文章
- javascript 中Array.prototype.sort 函数的用法
来源:http://www.jb51.net/article/5769.htm JavaScript中对变量的操作都是通过引用方式,而对数组也一样. 前两天想要对一个数组进行复制,一直苦于找不到办法( ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- Javascript 中 Array的 sort()和 compare()方法
Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...
- Javascript中Array.prototype.map()详解
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋 ...
- JavaScript中typeof和instanceof深入详解
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...
- JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
- JavaScript中继承的实现方法--详解
最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...
- javascript中 Array.prototype.slice的用法.
首先看到 www.w3school.cn上的解释:http://www.w3school.com.cn/jsref/jsref_slice_array.asp 定义和用法 slice() 方法可从已有 ...
- Array.prototype.map()方法详解
Array.prototype.map() 1 语法 const new_array = arr.map(callback[, thisArg]) 2 简单栗子 let arr = [1, 5, 10 ...
随机推荐
- .NET MVC4 实训记录之一(引入Unity3.0 Ioc框架)
一直在做维护项目,没有机会接触完整的架构,于是自学.NET MVC.自今日起,将自学的过程.遇到的问题以及解决方案记录下来. 在WebApp项目中右键,使用NuGet引入Unity3.0.
- c#中关于sealed修饰类的性能提升的测试
在clr var c#一书中,作者描述当用sealed修饰类时,可以提高系统性能而且建议大家也养成用sealed来修饰类的习惯.由于对性能二字比较敏感,所以本文先测试一下用sealed分别修饰和不修饰 ...
- 网际协议:无连接数据报交付(IPv4)
一.数据报格式:
- 【转】几点 iOS 开发技巧
[译] 几点 iOS 开发技巧 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高的 Mug ...
- asp.net 的一个简单进度条功能
我们先看下效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <sc ...
- ASP.NET服务器端事件利用MARQUEE实现正在处理效果
前言:ASP.NET同仁们应该都遇到过当触发一个比较耗时的服务器端事件时,页面会处在一个等待的状态(即假死状态),用户体验非常不好,很容易造成用户二次点击,造成重复提交.至于解决方案自然是有的(问go ...
- Mysql中实现多表关联查询更新操作
今天一下要记录一下才行了,每次都要去网上查找方法,每次都难找得要命 Mysql在更新某些字段的数据时,有时候会依据其他表的数据进行更新,需要通过关联后对不同的行更新不同的值,传统的update set ...
- 使用反射机制实现jQuery调用ashx类中的指定方法
使用反射机制实现jQuery调用ashx类中的指定方法 近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...
- ASP.NET MVC3开发-数据库篇之CodeFisrt开发(一)
本文讲述了在ASP.NET MVC3开发中M层使用Code Fisrt如何进行开发,由于作者对ASP.NET MVC3的学习不是很深,所以写的都是些基本的内容(写的如有不正确的地方请评论指正),适合初 ...
- Python之FTP多线程下载文件之多线程分块下载文件
Python之FTP多线程下载文件之多线程分块下载文件 Python中的ftplib模块用于对FTP的相关操作,常见的如下载,上传等.使用python从FTP下载较大的文件时,往往比较耗时,如何提高从 ...