这是今天在写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. linux简单命令---网络编程

    ---------------------------------------------------------------------------------------------------- ...

  2. vue项目报错:Unexpected tab character (no-tabs)

    eslint意思是检查规范代码 第一种方法: 新建项目的时候 第二种方法: 首先在项目的根目录下.eslintrc.js中加入一行代码:"no-tabs":"off&qu ...

  3. ES6拓展符修改对象

    // ES6 拓展符合并两个对象let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); // 修改对象部分属性.用户自定义的 ...

  4. React Native初始化项目0.47.1报错

    首先看一下安卓和iOS报错: iOS终端运行报错: Xcode运行报错: 解决办法一: 将版本降到0.44.3,修改package,具体请看我的另一篇博客: http://www.cnblogs.co ...

  5. 【JVM学习笔记】异常表的重要作用以及locals属性的含义

    有如下代码 public class Test { public void work() { try { InputStream is = new FileInputStream("test ...

  6. 使用rabbit mq.模拟dubbo,使MQ异步调用代码写起来像是同步方法.

    最近在改造老系统,遇到了需要使用rabbitMq的场景.在以前使用的过程中需要在发送端和消费端各种配置,感觉比较麻烦,然后突然想到了dubbo中@Reference注解的形式,可不可以做一个类似的架子 ...

  7. SpringBoot: 5.访问静态资源(转)

    springboot默认从项目的resources里面的static目录下或者webapp目录下访问静态资源 方式一:在resources下新建static文件(文件名必须是static) 在浏览器中 ...

  8. Unity热更新 xLua

    xLua是Unity3D下Lua编程解决方案,自2016年初推广以来,已经应用于十多款腾讯自研游戏,因其良好性能.易用性.扩展性而广受好评.现在,腾讯已经将xLua开源到GitHub. 2016年12 ...

  9. [AcWing303/304]任务安排2/3

    [AcWing303]任务安排2 有 \(N\) 个任务排成一个序列在一台机器上等待执行,它们的顺序不得改变.机器会把这 \(N\) 个任务分成若干批,每一批包含连续的若干个任务.从时刻 \(0\) ...

  10. Hadoop集群搭建-05安装配置YARN

    Hadoop集群搭建-04安装配置HDFS  Hadoop集群搭建-03编译安装hadoop Hadoop集群搭建-02安装配置Zookeeper Hadoop集群搭建-01前期准备 先保证集群5台虚 ...