剖析Javascript中sort()使用方法,以及重写sort()里的排序方法,实现自定义排序
语法:arrayObject.sort([compareFunction]);参数compareFunction可选。规定排序顺序,必须是函数。
sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点
// compare函数的基本操作
function compare(a, b){
if (根据某种排序标准a小于b) {
return -1
}
if (根据某种排序标准a大于b) {
return 1
}
// a === b
return 0
}
下面来看一个例子:
var students = [
{age: 18, name: "tom"},
{age: 20, name: "jack"},
{age: 19, name: "bob"}
]
// 现在对学生的姓名进行排序
students.sort(
(a, b) => {
return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0
}
)
结果如下↓

把名字换成年龄
// 对学生按年龄进行排序
students.sort(
(a, b) => {
return (a.age < b.age) ? -1 : (a.age > b.age) ? 1 : 0
}
)

这两种排序就等于用了同样的代码,那我们可不可以封装成一个统一的方法呢
来试一下↓
// 统一封装
const sortBy = (key) => {
return (a, b) => {
var result = (a[key] < b[key]) ? -1 : (a[key] > b[key]) ? 1 : 0
return result
}
}
sortBy()函数接收一个参数并返回一个接收两个参数的新函数====(这里就是闭包的强大之处)
下面我们就可以这样使用sort了
students.sort(sortBy("name"))
看看结果↓

和上面在()里写方法的结果一样啊
这样以后我们不管students每条数据有多少个key,我们想按照哪个key排序就输入那个key就可以了
It’s great!
--------------------------------------------------------------------------------------
V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort,数量小于10的数组使用 InsertionSort,比10大的数组则使用 QuickSort。
剖析Javascript中sort()使用方法,以及重写sort()里的排序方法,实现自定义排序的更多相关文章
- 剖析Javascript中forEach()底层原理,如何重写forEach()
我们平时用的forEach()一般是这样用的 var myArr = [1,5,8] myArr.forEach((v,i)=>{ console.log(v,i) })//运行后是这样的1 0 ...
- 深入剖析JavaScript中的数据类型判断(typeof instanceof prototype.constructor)
关于JavaScript中的类型判断,我想大部分JavaScripter 都很清楚 typeof 和 instanceof,却很少有人知道 constructor,以及constructor与前面二 ...
- Javascript中Array(数组)对象常用的几个方法
Javascript中Array数组的几个常用方法 pop() --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice() --按照下 ...
- Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密
Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...
- JavaScript中判断对象是否属于Array类型的4种方法及其背后的原理与局限性
前言 毫无疑问,Array.isArray是现如今JavaScript中判断对象是否属于Array类型的首选,但是我认为了解本文其余的方法及其背后的原理与局限性也是很有必要的,因为在JavaScrip ...
- JavaScript中闭包实现的私有属性的getter()和setter()方法
注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 深入剖析javaScript中的深拷贝和浅拷贝
如何区分深拷贝与浅拷贝,简单来说,假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝:我们先看两个简单的案例: //案例1(深拷贝) var a ...
- 深入剖析JavaScript中的对象与原始值之间的转换机制
我们都知道原始值之间是可以互相转换的,但是如果对象转原始值呢? 所有的对象在布尔上下文(context)中均为 true .所以对于对象,不存在 to-boolean 转换, 只有字符串和数值转换. ...
- JavaScript中unicode编码与String互转(三种方法)
1.引言 JS本身就支持unicode转string功能,一共有三种方式和String单个字符转unicode编码. 2.方法 //unicode转String 1. eval("'&quo ...
随机推荐
- Android 日期选择框 简洁常用
效果 核心代码 >方法 /** * @description 选择日期弹出框 * @param listener 选择日期确定后执行的接口 * @param curDate 当前显示的日期 * ...
- Jmeter后置处理器,正则表达式提取器的使用
[使用场景]:下一个请求参数需要从上一个请求的响应数据中获取 [jmeter正则表达式说明]:使用perl正则表达式(可参考:http://www.runoob.com/perl/perl-regul ...
- mysql简单备份与恢复
1.备份 mysqldump -u root -h 127.0.0.1 -p --set-gtid-purged=OFF abc > /data/mysqlBak/abc_20200206.s ...
- .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...
- 转载整理:SublimeText3 Emmet失效问题以及win7 pyV8安装问题
SublimeText3 Emmet安装问题网上已经很多帖子了,这个简单,主要对win7 64位我本人遇到的Emmet好多快捷功能无法用(比如ul>li*4 Tab无法生成)问题做了整理!搜了 ...
- Django2.2 静态文件的上传显示,遇到的坑点-------已解决
前情提要:这里虽说是Django2.2 ,但经过测试发现Django 的其他版本也可以用此方法解决 一.项目根目录下的static文件的路由显示问题 在项目根目录下创建静态文件时发现,即使我配置了se ...
- css3基础-动画案例(没啥实用性,纯粹好玩的)
会动的汉克狗: <!doctype html> <html lang="en"> <head> <meta charset="U ...
- .net 父类值赋给子类
1.最简单的方式,反射+泛型 优点:字段修改时,无需更改代码,只需要更新实体即可 缺点:因为用到反射,可能效率会稍微弱那么一点点,没有实际用太多字段测试 public static cClass Pa ...
- Selenium实战(六)——数据驱动应用
一.数据驱动 由于大多数文章和资料都把“读取数据文件”看做数据驱动的标志,下面创建一个baidu_data.csv文件: 文件第一列为测试用例名称,第二列为搜索的关键字.接下来创建test_baidu ...
- [CF1311E] Construct the Binary Tree - 构造
Solution 预处理出 \(i\) 个点组成的二叉树的最大答案和最小答案 递归做,由于只需要构造一种方案,我们让左子树大小能小就小,因此每次从小到大枚举左子树的点数并检验,如果检验通过就选定之 现 ...