这是今天在写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. 来自iSpy整理的最全海康大华IPC的RTSP连接地址

    来自iSpy整理的最全海康大华IPC的RTSP连接地址 先贴出处: 海康:http://www.ispyconnect.com/man.aspx?n=Hikvision 大华:http://www.i ...

  2. Delphi通过ADO读写数据库

    ADO是一种程序对象,用于表示用户数据库中的数据结构和所包含的数据. ADO (ActiveX Data Objects,ActiveX数据对象)是Microsoft提出的应用程序接口(API)用以实 ...

  3. Java数组(2):数组与泛型

    通常,数组与泛型不能很好的结合,你不能实例化具有参数化类型的数组.擦除会移除参数类型信息,而数组必须知道它们所持有的确切类型.但是我们可以参数化数组本身. import java.util.Array ...

  4. 20190603 - CentOS 7 提示 Failed to load SELinux policy. Freezing 导致卡住不启动的解决办法

    现象 最近 Windows 和两台 Mac 混用,将 Windows VirtualBox 中安装的 CentOS 7 拷贝到 Mac 上. 启动 CentOS 7 时,图形界面进度卡在最后,按 Es ...

  5. 在openstack中安装mysql5.7

    在控制节点上执行 1.下载mysql二进制安装包和依赖包 wget http://mirror.centos.org/centos/7/os/x86_64/Packages/libaio-devel- ...

  6. 2019-2020 ICPC, Asia Jakarta Regional Contest C. Even Path

    Pathfinding is a task of finding a route between two points. It often appears in many problems. For ...

  7. dfs -cogs 5 P服务点设置

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=FSXJmiJSg   问题描述为了进一步普及九年义务教育,政府要在某乡镇建立P所希望小学 ...

  8. SQL ----- JDBC 用ID查询某条记录

    package demo; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...

  9. 论文阅读 | A Survey on Multi-Task Learning

    摘要 多任务学习(Multi-Task Learning, MTL)是机器学习中的一种学习范式,其目的是利用包含在多个相关任务中的有用信息来帮助提高所有任务的泛化性能. 首先,我们将不同的MTL算法分 ...

  10. 关于mysql的自增测试,innodb和myisam下的不同表现

    关于mysql的自增测试,innodb和myisam下的不同表现 innodb引擎下的自增id测试 1 innodb引擎下,如果显示insert了最大值,那么下次的AUTO_INCREMENT值就是这 ...