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 相关文章推荐
也说JavaScript中String类的replace函数
Sep 22 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python获取引用对象的个数方式
2019/12/20 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
pandas针对excel处理的实现
2021/01/15 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
入党思想汇报
2014/01/05 职场文书
九年级政治教学反思
2014/02/06 职场文书
验房委托书
2014/08/30 职场文书
领导班子对照检查材料
2014/09/22 职场文书
党风廉政建设心得体会
2019/05/21 职场文书