js 数组元素排序?

时间:2022-09-02 09:53:27

Part.1  sort 方法

js 有自带排序方法 sort(),  默认 升序 排列

如:

 data() {
return {
arr: [1,3,2,5,6,8,7,4,9]
}
},

控制台如下:

js 数组元素排序?

貌似没毛病,老铁~~~   0.0

Part.2  问题

我们改变数组:

 data() {
return {
arr: [1,3,2,5,11,10,20,50,6,8,7,4,9]
}
}

控制台如下:

js 数组元素排序?

what are you  弄啥咧?  什么鬼!!!

查了一波资料,因为 sort() 方法排序是根据 Unicode码 比较,所以无法完成这种数组的排序!怎么办咧?

看了几篇博客发现一个有效且到目前为止感觉最简单的一种方法:自定义比较

如下:

 cmp: function(a, b) {
return a - b
}

原理:

参数  a ,b

如果 a > b  则 a - b > 0  返回一个正数

如果 a < b  则 a - b < 0  返回一个负数

如果 a = b  则 a - b = 0  返回 0

Part.3  实践

data() {
return {
arr: [1,3,2,5,11,10,20,50,6,8,7,4,9]
}
},
mounted() {
this.arr.sort(this.cmp)//注意此处不能使用 this.cmp()。原因 1:代码会报错 2.我们需要的是传入一个函数 this.cmp,this.cmp()这样只会得到 a-b 值
},
methods: {
cmp: function(a, b) {
return a - b
}
},

控制台如下:

js 数组元素排序?

完成排序!

如果小伙伴需要 降序 排列,只需将 自定义比较函数

js 数组元素排序?

return  a - b  改为  b - a  即可!~

参考博客:https://blog.csdn.net/baidu_25343343/article/details/54982747

js 数组元素排序?的更多相关文章

  1. js 数组元素排序

    字母排序 <html> <body> <script type="text/javascript"> ) arr[] = "Georg ...

  2. js数组对象排序详解

    一.js对象遍历输出的时候真的是按照顺序输出吗? 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',h ...

  3. JS数组随机排序

    var arr=[1,2,3,4,5]; arr.sort(function(a,b){ var v=Math.random()>0.5?1:-1; console.log(a,b,v); re ...

  4. js数组元素的添加和删除

    简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...

  5. JAvaScript:JS数组元素去重的方法

    在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现. 方案一: 思路: 1.构建一个新的数组存放结果: ...

  6. js 数组随机排序

    仅用于个人学习记录 javascript 数组随机排序1.最简洁的方法:function randomsort(a, b) {    return Math.random()>.5 ? -1 : ...

  7. Js 数组对象排序

    1.定义函数 /** * 数组对象排序函数 * @param {any} name 排序字段 * @param {any} order 升.降(这里事true.false记得处理下) */ var b ...

  8. js数组sort排序方法的算法

    说明一下,ECMAScript没有定义使用哪种排序算法,各个浏览器的实现方式会有不同.火狐中使用的是归并排序,下面是Chrome的sort排序算法的实现. sort方法源码 DEFINE_METHOD ...

  9. JavaScript 数组元素排序

    var sortArray = new Array(3,6,8888,66); // 元素必须是数字 sortArray.sort(function(a,b){return a-b}); // a-b ...

随机推荐

  1. angular源码分析:&dollar;compile服务——directive他妈

    一.directive的注册 1.我们知道,我们可以通过类似下面的代码定义一个指令(directive). var myModule = angular.module(...); myModule.d ...

  2. shell脚本中的几个括号总结&lpar;小括号&sol;大括号&sol;花括号&rpar;--from&colon;http&colon;&sol;&sol;www&period;cnblogs&period;com&sol;hanyan225&sol;archive&sol;2011&sol;10&sol;06&sol;2199652&period;html

    在Shell中的小括号,大括号结构和有括号的变量,命令的用法如下: 1.${var}2.$(cmd)3.()和{}4.${var:-string},${var:+string},${var:=stri ...

  3. 两台Linux主机之间文件的复制

    使用scp命令可以实现两台Linux主机之间的文件复制,基本格式是: scp [可选参数] file_source file_target 1. 复制文件 命令格式: scp local_file r ...

  4. WinCE开机Logo的实现&lpar;USB下载图片到nandflash&rpar;

    WinCE开机启动Logo使用Eboot读取NandFlash中的图片数据,然后显示的方式.对于开机logo的方式网友http://jazka.blog.51cto.com/809003/664131 ...

  5. SVG 2D入门2 - 图形绘制

    基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了.废话不说了,直接看例子,这个最直接:   <svg width="200" heigh ...

  6. PHP连接sqlserver的两种方法&comma;向sqlserver2000中写入数据,中文乱码

    项目环境是php5.3.28 项目用的ThinkPHP3.2.3  已经mysql5.5数据库,要和另一个项目对接,需要连接sqlsever2000数据库进行一些操作. 第一种用php自带扩展连接数据 ...

  7. WPF Image触摸移动方法

    1: TouchPoint mPoint = null; 2: double mOffsetX;//水平滚动条当前位置 3: double mOffsetY;//垂直滚动条当前位置 4: bool m ...

  8. 《学习opencv》笔记——矩阵和图像处理——cvMax&comma;cvMaxS&comma;cvMerge&comma;cvMin and cvMinS

    矩阵和图像操作 (1)cvMax函数 其结构 void cvMax(//比較两个图像取最大值 const CvArr* src1,//图像1 const CvArr* src2,//图像2 CvArr ...

  9. 坑人的toLocaleDateString和简单地跳坑方式

    最近在做一个一个医学大数据的项目的时候,独立设计.构思.制作了完成了一个生命历程图的功能.既然设计到时间,那就免不了对Date对象进行一系列的操作,也就免不了对日期对象进行一系列的格式化.走的路多了, ...

  10. 深入浅出--UNIX多进程编程之fork&lpar;&rpar;函数

    0前言 上周都在看都在学习unix环境高级编程的第八章--进程控制.也就是这一章中.让我理解了unix中一些进程的原理.以下我就主要依照进程中最重要的三个函数来进行解说.让大家通过阅读这一篇文章彻底明 ...