简单了解JavaScript sort方法


Posted in Javascript onNovember 25, 2019

在平时的业务开发中,数组(Array) 是我们经常用到的数据类型,那么对数组的排序也很常见,除去使用循环遍历数组的方法来排列数据,使用JS数组中原生的方法 sort 来排列(没错,比较崇尚JS原生的力量)。

1、举个栗子

数组中能够直接用来排序的方法有:reverse() 和 sort(),由于 reverse()方法不够灵活,才有了sort()方法。在默认情况下,sort()方法按升序排列数组。

var arr=[1,3,5,9,4];
console.log(arr.sort());
// 输出: [1, 3, 4, 5, 9]

这时发现数据按照从小到大排列,没问题;于是再把数组改成:var arr=[101,1,3,5,9,4,11];,再调用sort()方法打印排序结果。

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort());
// 输出: [1, 101, 11, 3, 4, 5, 9]

这个时候发现数组101,11都排在3前面,是因为 sort() 方法会调用数组的toString()转型方法,然后比较得到的字符串,确定如何排序,即使数组中的每一项都是数值,sort()方法比较的也是字符串。

那么字符串又是怎么排序的呢,是根据字符串的unicode编码从小到大排序的。下面我们尝试打印出数组每一项的unicode编码看一下。

...
// 转码方法
function getUnicode (charCode) {
  return charCode.charCodeAt(0).toString(16);
}
// 打印转码
arr.forEach((n)=>{
 console.log(getUnicode(String(n)))
});

// 输出: 31 31 31 33 34 35 39

惊奇地发现,1,101,11的字符串unicode编码都是31

2、传入比较函数以指定顺序

以上发现sort()方法不是按照我们想要的顺序排序的,那么,怎么解决呢,sort()方法可以接收一个比较函数作为参数,以便指定哪个值位于哪个值前面。

比较函数(compare)接收两个参数,如果第一个参数位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数位于第二个之后则返回一个整数。

function compare(value1,value2){
 if (value1 < value2){
  return -1;
 } else if (value1 > value2){
  return 1;
 } else{
  return 0;
 }
}

我们把比较函数传递给sort()方法,在对arr数组进行排列,打印结果如下:

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort(compare));
// 输出: [1, 3, 4, 5, 9, 11, 101];

可以发现排序从小到大没有什么问题。

3、对象数组的排序

sort() 方法通过传入一个比较函数来排序数字数组,但是在开发中,我们会对一个对象数组的某个属性进行排序,例如id,年龄等等,那么怎么解决呢?

要解决这个问题:我们可以定义一个函数,让它接收一个属性名,然后根据这个属性名来创建一个比较函数并作为返回值返回来(JS中函数可以作为值来使用,不仅可以像传递参数一样把一个函数传递给另一个函数,也可以将一个函数作为另一个函数的结果返回,函数作为JS中的第一等公民不是没有原因的,确实很灵活。),代码如下。

function compareFunc(prop){
 return function (obj1,obj2){
  var value1=obj1[prop];
  var value2=obj2[prop];
  if (value1 < value2){
    return -1;
  } else if (value1 > value2){
    return 1;
  } else{
    return 0;
  }
 }
}

定义一个数组users,调用sort()方法传入compareFunc(prop)打印输出结果:

var users=[
  {name:'tom',age:18},
  {name:'lucy',age:24},
  {name:'jhon',age:17},
];
console.log(users.sort(compareFunc('age')));
// 输出结果
[{name: "jhon", age: 17},
{name: "tom", age: 18},
{name: "lucy", age: 24}]

在默认情况下,调用sort()方法不传入比较函数时,sort()方法会调用每个对象的toString()方法来确定他们的次序,当我们调用compareFunc('age')方法创建一个比较函数,排序是按照对象的age属性排序的。

4、XML节点的排序

尽管现在很多后台返回数据就是JSON格式的,很轻量又方便解析。但是之前有个项目因为后台返回的都是XML字符串,前端拿到数据后还得进行序列化,有些需要排序,之前的排序都是把XML转换成数组对象进行排序的,这样做没有什么问题,只不过感觉代码写的很冗余麻烦。后来就突发奇想,xml获取得到也是类数组对象,把类数组对象转换成数组不就可以直接排序了么。

// 1.模拟后端返回的XML字符串
var str=`
<root>
 <user>
  <name>tom</name>
  <age>18</age>
 </user>
 <user>
  <name>lucy</name>
  <age>24</age>
 </user>
 <user>
  <name>jhon</name>
  <age>17</age>
 </user>
<root>
`  
// 2.定义比较函数
function compareFunction(prop){
 return function (a, b) {
   var value1= a.getElementsByTagName(prop)[0].textContent;
   var value2= b.getElementsByTagName(prop)[0].textContent;
   if (value1 < value2){
    return -1;
   } else if (value1 > value2){
    return 1;
   } else{
    return 0;
  }
 }
}
// 3.xml字符串转换成xml对象
var domParser = new DOMParser();
var xmlDoc = domParser.parseFromString(str, 'text/xml');
var userElements=xmlDoc.getElementsByTagName('user'));
// 4.userElements类数组对象转换成数组再排序
var userElements=Array.prototype.slice.call(xmlDoc.getElementsByTagName('user'));
var _userElements=userElements.sort(compareFunction('age'));
// 5.打印排序后的结果
_userElements.forEach((user)=>{
 console.log(user.innerHTML);
});

打印排序后的结果

简单了解JavaScript sort方法

可以发现,XML节点已经按照age从小到大排序了。

5、总结

JS数组的sort方法因为有了传入比较函数使得排序灵活了许多,还有根据时间,汉字拼音首字母排序等等,我们只要牢记通过传入比较函数明确比较两个对象属性值,通过比较属性值来决定对象的排序顺序即可。自己也是在工作中遇到问题从而发现解决问题的新思路,以上就简单总结这么多了,如有不足,多多指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
最简单的tab切换实例代码
May 13 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 #Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
深入php多态的实现详解
2013/06/09 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
Python编程入门的一些基本知识
2015/05/13 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
财务副总经理工作职责
2013/11/25 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
学前班学生评语
2014/12/29 职场文书
高三数学教学反思
2016/02/18 职场文书
导游词幽默开场白
2019/06/26 职场文书