简单了解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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
JavaScript 原型继承
Dec 26 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
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
使用eAccelerator加密PHP程序
2008/10/03 PHP
解析php5配置使用pdo
2013/07/03 PHP
php中socket的用法详解
2014/10/24 PHP
php输出xml属性的方法
2015/03/19 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python变量和字符串详解
2017/04/29 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python文字转语音实现过程解析
2019/11/12 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
优秀交警事迹材料
2014/01/26 职场文书
售后客服工作职责
2014/06/16 职场文书
2014年度安全工作总结
2014/12/04 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL