这是今天在写vue项目时发生的一个小问题,在此记录一下,方便自己的回顾。项目是前后端分离的,前台主要使用了vue-cli3.0 + mintui,是一个移动端的web app包括了后台发布管理的一些功能,其他就先不介绍了,项目后期方便的话我会截取一些代码发布在我的github上,自己也是第一次尝试用mintui框架,当时也是感觉非常的好看,组件化开发的话也是非常方便。这次开发中主要遇到的一个问题是在一个数组排序中,发现排序后的顺序不对,排序方法是经过测试没有问题的,只是这次数据量增加了一些就发生了顺序错乱的问题,刚开始以为是数据的问题,或是其他地方影响了,因为这个排序方法原来一直是可以正常使用的,后来我检查了排序的入参数组,发现没有问题,只好在排序方法的中写几个console看一下结果,发现就是排序出了问题...

  这里先贴一下排序方法:

 // 快速排序  每次选择最左边的数作为基数
function quickSort(arr){
if (arr.length<2) { return arr; }
// 定义左指针
var left=0;
// 定义右指针
var right=arr.length-1;
//开启每一轮的排序
while(left<right){
// 寻找右边比arr[0]小的数的下标
while(arr[right]>=arr[0] && left<right){
right=right-1;
}
// 寻找左边比arr[0]大的数的下标
while(arr[left]<=arr[0] && left<right){
left++;
}
//当左边指针与右边指针相遇后,交换arr[0]与当前两个指针所在的元素
if (right==left) {
let mid=arr[right];
arr[right]=arr[0];
arr[0]=mid;
break;
}
// 当左指针小于右指针的位置,交换两个指针当前位置的元素
let tem=arr[right];
arr[right]=arr[left];
arr[left]=tem;
}
//递归实现
return quickSort(arr.slice(0,left)).concat(arr.slice(left,right+1)).concat(quickSort(arr.slice(right+1)));
}

  去浏览器的控制台测试了好几遍都没有什么问题,包括后来换了冒泡排序都是错乱的结果,这让我有点摸不着头脑,干脆去搜了一下js的数组排序,无意中搜到了sort方法。

 Js中sort()方法原理及使用

sort()  方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要)

,以便进行比较。

语法:arrayObject.sort(sortby);

参数sortby  可选,用来规定排序的顺序,但必须是函数。

 看到这里我突然想到会不会是因为我传入的数组也是字符串,检查了一下代码,发现确实有这种可能,因为我的数组中的元素是从其他字符串数组中循环截取的,那么数字字符串排序比较就会出现这种错乱的问题,因为比较的是Ascii码,然后我加上了parseInt,再次测试,没有问题。

总结:发生问题与bug其实很常见,只要一点点的去推导测试,最终解决问题,也能取得很大收获,这个过程是很爽的,痛并快乐着。。。

记录--js中出现的数组排序问题的更多相关文章

  1. js中对arry数组的各种操作小结

    最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊,为了在以后的工作中写出最优化的代码,我 ...

  2. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  3. js中字符串与数组的相互转换

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么

    js课程 3-10  js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...

  6. js中关于一个数组中最大、最小值以及它们的下标的输出的一种解决办法

    今天在学习js中的数组时,遇到的输出一个数组中最大.最小值以及它们的下表,以下是自己的解决方法! <script type="text/javascript"> var ...

  7. JS中字符串与数组的一些常用方法

    真是恨透了这些类似于substring substr slice 要么长得像,要么就功能相近的方法... 1⃣️string 1.substring(start开始位置的索引,end结束位置索引) 截 ...

  8. [undefined,1] 和 [,1]的区别在哪里--认识js中的稀疏数组

    事情是这样的 今天我想写一个能快速生成一个自然数数组的函数,就是[0,1,2,3]这样的,然后我写了下面的代码: new Array(10).map((item, index) => { ret ...

  9. js中json对象数组按对象属性排序---1

    转载:https://www.cnblogs.com/jasonwang2y60/p/6656103.html 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据js ...

随机推荐

  1. 史上最全最详细JNDI数据源配置说明

    转: 史上最全最详细JNDI数据源配置说明 2017年08月05日 17:12:08 万米高空 阅读数 23983   版权声明:本文为博主原创文章,转载请注明出处,尊重劳动成果,谢谢~ https: ...

  2. mkvirtualenv管理python版本

    centos7安装pip 安装pip yum -y install epel-release yum -y install python2-pip 安装virtualenvwrapper pip in ...

  3. docker search 报错

    docker 出现 Error response from daemon vim /etc/containers/registries.conf [registries.search]registri ...

  4. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 -- iframe专题 <下>

    学习目的: 掌握iframe矿建的定位,因为前端的iframe框架页面元素信息,大多时候都会带有动态ID,无法重复定位. 场景: 1. iframe切换 查看iframe 切换iframe 多个ifr ...

  5. 解决使用wamp怎么使用php命令行

    用了wamp,把php加到环境变量就报错啊! 那怎么用命令行啊! 可以找么着:(比如想执行 php think build --module demo) E:\php-project\tp5.> ...

  6. @Transactional事务总结

    一:加了注解@Transactional就能起作用的原理总结: 1:首先是由类:JdkDynamicAopProxy,在invoke方法里面创建动态代理类,同时由拦截类进行拦截,代码如下所示: Lis ...

  7. Design Phone Directory

    Design a Phone Directory which supports the following operations: get: Provide a number which is not ...

  8. E.XKC's basketball team(The Preliminary Contest for ICPC Asia Xuzhou 2019)

    https://nanti.jisuanke.com/t/41387 解: 离散化+线段树. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); ...

  9. python3.6以后的新写法

    声明redis_store为StrictRedis 类型,值为None,用处:在别处调用时,如果redis_store仍为None,不会有提示(自动补全的提示),如果想要自动补全的提示则写成这样,函数 ...

  10. Ruby Rails学习中:调试信息和 Rails 的三种环境,Users 资源,调试器,Gravatar 头像和侧边栏

    注册 一.调试信息和 Rails 环境 现在咱们要实现的用户资料页面是我们这个应用中第一个真正意义上的动态页面.虽然视图的代码不会动态改变, 不过每个用户资料页面显示的内容却是从数据库中读取的.添加动 ...