js 数组元素排序?
Part.1 sort 方法
js 有自带排序方法 sort(), 默认 升序 排列
如:
data() {
return {
arr: [1,3,2,5,6,8,7,4,9]
}
},
控制台如下:

貌似没毛病,老铁~~~ 0.0
Part.2 问题
我们改变数组:
data() {
return {
arr: [1,3,2,5,11,10,20,50,6,8,7,4,9]
}
}
控制台如下:

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
}
},
控制台如下:

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

return a - b 改为 b - a 即可!~
参考博客:https://blog.csdn.net/baidu_25343343/article/details/54982747
js 数组元素排序?的更多相关文章
- js 数组元素排序
字母排序 <html> <body> <script type="text/javascript"> ) arr[] = "Georg ...
- js数组对象排序详解
一.js对象遍历输出的时候真的是按照顺序输出吗? 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',h ...
- 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 ...
- js数组元素的添加和删除
简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...
- JAvaScript:JS数组元素去重的方法
在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现. 方案一: 思路: 1.构建一个新的数组存放结果: ...
- js 数组随机排序
仅用于个人学习记录 javascript 数组随机排序1.最简洁的方法:function randomsort(a, b) { return Math.random()>.5 ? -1 : ...
- Js 数组对象排序
1.定义函数 /** * 数组对象排序函数 * @param {any} name 排序字段 * @param {any} order 升.降(这里事true.false记得处理下) */ var b ...
- js数组sort排序方法的算法
说明一下,ECMAScript没有定义使用哪种排序算法,各个浏览器的实现方式会有不同.火狐中使用的是归并排序,下面是Chrome的sort排序算法的实现. sort方法源码 DEFINE_METHOD ...
- JavaScript 数组元素排序
var sortArray = new Array(3,6,8888,66); // 元素必须是数字 sortArray.sort(function(a,b){return a-b}); // a-b ...
随机推荐
- SPOJ FIBOSUM && FIBOSUM2
Fibonacci数列定义为 $$f_n = f_{n-1}+f_{n-2}, \text{以及初值}f_0=0, f_1=1.$$ 本文之讨论,皆在模$10^9+7$意义下. FIBOSUM 给定$ ...
- Java 8的Lambda学习
参考资料:https://www.dotnetperls.com/lambda-java Lambdas用于创建函数对象.通过它们,我们可以在其它方法内部指定方法,甚至可以把方法做为参数传递给其它方法 ...
- 每天一水poj1502【最短路】
#include<iostream> #include<cstdio> #include<string.h> #include<algorithm> u ...
- IT兄弟连 JavaWeb教程 Servlet中定义的变量的作用域类型
在Java语言中,局部变量和实力变量有着不同的作用于,它们的区别如下: 局部变量在一个方法中定义,每当一个线程执行局部变量所在的方法时,在线程的堆栈中就会创建这个局部变量,当线程执行完该方法,局部变量 ...
- 报错org.springframework.dao.DataIntegrityViolationException
最简单的原因可能是数据库外键字段选择了不能为空, 改为允许为空就行了.
- 天天坐在电脑面前,小心抑郁!来自一个人的旅行<自导自演>
画图画累了?写代码写累了?何不放松一下呢. 一望无际.亲近自然.忘乎所以.放空自我! 一个人的旅行, GoPro拍摄,后期采用FCPX.记录梦想, 自导自演.一个人去了很多地方, 认识和很多当地人,交 ...
- postman接口测试系列: 时间戳和加密
在使用postman进行接口测试的时候,对于有些接口字段需要时间戳加密,这个时候我们就遇到2个问题,其一是接口中的时间戳如何得到?其二就是对于现在常用的md5加密操作如何在postman中使用代码实现 ...
- SSM报错:No converter found for return value of type: class java.util.ArrayList at org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor.writeWithMessageConverter
我使用的是SSM框架,是在编写测试RESTFUL接口的时候出现, @RequestMapping(value = "/selectAll", method = RequestMet ...
- iOS NSUserDefaults [setValue:forKey:] [setObject:forKey:] <Objc> setValue(_,forKey:) set(_,forKey) <Swift 3>
前者其实是NSObject都可以调用的KVC方法,后者才是NSUserDefaults的实例方法: 这里参数的类型是nullable id,但是我建议你在传null的时候慎重考虑,否则你的应用就可能面 ...
- c++ 常用的几种重载操作符
运算符可以作为普通函数,朋友函数或成员函数来重载.下面的经验法则可以帮助您确定哪种形式最适合于给定的情况: 如果你重载了赋值(=),下标([]),函数调用(())或成员选择( - >),那么它就 ...