js中的数组对象排序分析


Posted in Javascript onDecember 11, 2018

一、普通数组排序

js中用方法sort()为数组排序。sort()方法有一个可选参数,是用来确定元素顺序的函数。如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序。如:

var arr = ["a", "b", "A", "B"];
arr.sort();
console.log(arr);//["A", "B", "a", "b"]

因为字母A、B的ASCII值分别为65、66,而a、b的值分别为97、98,所以上面输出的结果是 ["A", "B", "a", "b"] 。

如果数组元素是数字呢,结果会是怎样?

var arr = [15, 8, 25, 3];
arr.sort();
console.log(arr);//[15, 25, 3, 8]

结果是 [15, 25, 3, 8] 。其实,sort方法会调用每个数组项的toString()方法,得到字符串,然后再对得到的字符串进行排序。虽然数值15比3大,但在进行字符串比较时"15"则排在"3"前面。显然,这种结果不是我们想要的,这时,sort()方法的参数就起到了作用,我们把这个参数叫做比较函数。

比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数。例子:

var arr = [23, 9, 4, 78, 3];
var compare = function (x, y) {//比较函数
 if (x < y) {
 return -1;
 } else if (x > y) {
 return 1;
 } else {
 return 0;
 }
}
console.log(arr.sort(compare));

结果为 [3, 4, 9, 23, 78] ,返回了我们想要的结果。如果要按降序排序,比较函数写成这样即可:

var compare = function (x, y) {
 if (x < y) {
 return 1;
 } else if (x > y) {
 return -1;
 } else {
 return 0;
 }
}

我们并不能用比较函数比较一个不能转化为数字的字符串与数字的顺序:

var arr = ["b", 5];
console.log(arr.sort(compare))

结果是 ["b", 5] 。因为比较函数在比较时,会把先把字符串转化为数字,然后再比较,字符串b不能转化为数字,所以就不能比较大小。然而,当不用比较函数时,会比较ASCII值,所以结果是 [5, "b"] 。

二、数组对象排序

如果数组项是对象,我们需要根据数组项的某个属性对数组进行排序,要怎么办呢?其实和前面的比较函数也差不多:

var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
var compare = function (obj1, obj2) {
 var val1 = obj1.name;
 var val2 = obj2.name;
 if (val1 < val2) {
 return -1;
 } else if (val1 > val2) {
 return 1;
 } else {
 return 0;
 }  
} 
console.log(arr.sort(compare));

输出结果为 [Object { name="wlz", age=25}, Object { name="zlw", age=24}] ,可以看到数组已经按照 name 属性进行了排序。我们可以对上面的比较函数再改造一下:

var compare = function (prop) {
 return function (obj1, obj2) {
 var val1 = obj1[prop];
 var val2 = obj2[prop];if (val1 < val2) {
  return -1;
 } else if (val1 > val2) {
  return 1;
 } else {
  return 0;
 }  
 } 
}

如果想按照 age 进行排序, arr.sort(compare("age")) 即可。

但是对age属性进行排序时需要注意了,如果age属性的值是数字,那么排序结果会是我们想要的。但很多时候我们从服务器传回来的数据中,属性值通常是字符串。现在我把上面的数组改为:

var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];

可以看到,我把 age 属性由数字改为了字符串,第二个数组项的 age 值改为了 "5" 。再次调用 arr.sort(compare("age")) 后,结果为:

[Object { name="zlw", age="24"}, Object { name="wlz", age="5"}]

我们的期望是5排在25前面,但是结果不是。这是因为当两个数字字符串比较大小时,会比较它们的ASCII值大小,比较规则是:从第一个字符开始,顺次向后直到出现不同的字符为止,然后以第一个不同的字符的ASCII值确定大小。所以"24"与"5"比较大小时,先比较”2“与"5"的ASCII值,显然”2“的ASCII值比"5"小,即确定排序顺序。

现在,我们需要对比较函数再做一些修改:

var compare = function (prop) {
 return function (obj1, obj2) {
 var val1 = obj1[prop];
 var val2 = obj2[prop];
 if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
  val1 = Number(val1);
  val2 = Number(val2);
 }
 if (val1 < val2) {
  return -1;
 } else if (val1 > val2) {
  return 1;
 } else {
  return 0;
 }  
 } 
}

在比较函数中,先把比较属性值转化为数字 Number(val1) 再通过 !isNaN(Number(val1)) 判断转化后的值是不是数字(有可能是NaN),转化后的值如果是数字,则比较转换后的值,这样就可以得到我们想要的结果了, 调用 arr.sort(compare("age")) 得到:

[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]

可以看到,确实是按正确的方式排序了。

这篇文章所讲的都是基础的,没什么技术含量,只是最近项目中遇到了对数组对象进行排序的问题,所以在这里写出来分享一下,相信总能帮到一些朋友。

Javascript 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JavaScript数组复制详解
Feb 02 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
js模拟实现百度搜索
Jun 28 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
详解Vue源码之数据的代理访问
Dec 11 #Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 #Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 #Javascript
Vue入门之数量加减运算操作示例
Dec 11 #Javascript
简单的React SSR服务器渲染实现
Dec 11 #Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 #Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
You might like
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jQuery知识点整理
2015/01/30 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python中的并发编程实例
2014/07/07 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
如何利用python查找电脑文件
2018/04/27 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
主题酒店策划书
2014/01/28 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
市场督导岗位职责
2015/04/10 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Python经常使用的一些内置函数
2022/04/11 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
python区块链持久化和命令行接口实现简版
2022/05/25 Python