这是今天在写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. flutter richText富文本

    flutter中富文本使用 RichText( text: TextSpan( text: '登陆即同意', style: TextStyle(fontSize: 14, color: Colors. ...

  2. Linux系统管理_主题02 :管好文件(1)_2.4 链接文件_ln

    在 Linux 中,链接有两种:符号链接(symbolic link)和硬链接(hard link).  删除一个符号链接不会影响到这个符号链接指向的目标文件或目 录:  反过来,删除.移动或者重 ...

  3. 怎样做delphi程序连接数据库失败,单机确定就关闭窗体

    我单机确定还会显示窗体?? Application.Terminate;

  4. Pytorch-属性统计

    引言 本篇介绍Pytorch属性统计的几种方式. 统计属性 求值或位置 norm mean sum prod max, min, argmin, argmax kthvalue, topk norm ...

  5. iis管理器的程序应用池中没有Asp.NET v4.0

    然后 windows + r 输入 cmd 然后输入CD C:\Windows\Microsoft.NET\Framework64\v4.0.30319 然后 输入 aspnet_regiis.exe ...

  6. 【Flink】flink执行jar报错:java.io.IOException: Error opening the Input Split file 或者 java.io.FileNotFoundException

    报错内容 flink执行jar时,报如下错误: org.apache.flink.client.program.ProgramInvocationException: Job failed. (Job ...

  7. 拷贝docker镜像到其他机器部署

    有拷贝docker images到其他主机的情况,当然是通过pull的方式来转移到其他宿主机. 1 sudo docker save -o golang:alpine3.7  ./my-golang- ...

  8. flask LOCAL线程隔离技术

    from threading import Thread from werkzeug.local import Local local = Local()#实例化一个线程隔离对象 request = ...

  9. idea连接docker实现一键部署

    一.修改配置文件,打开2375端口 [root@microservice ~]# vim /usr/lib/systemd/system/docker.service 在ExecStart=/usr/ ...

  10. 23.安装php和echarts进行结合展示图表

    数据展示 http://echarts.baidu.com/index.html 是一个图像展示 可以到官方实例中选择各种图 通过下载例子 新建echartdome.php <!DOCTYPE ...