简单了解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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
js快速排序的实现代码
Dec 08 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
vue+vant实现购物车全选和反选功能
Nov 17 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
提取HTML标签
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
中专自我鉴定范文
2013/10/16 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
公开承诺书格式
2014/05/21 职场文书
2014年环保局工作总结
2014/12/11 职场文书
捐款感谢信
2015/01/20 职场文书
小学总务工作总结
2015/08/13 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python