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 ...
随机推荐
- Keepalived + HAProxy 搭建【第二篇】Keepalived 的安装与配置
第一步:准备 1. 简介 本文搭建的是利用 Keepalived 实现 HAProxy 的热备方案,即两台主机上的 HAProxy 实例同时运行,其中全总较高的实例为 MASTER,MASTER出现异 ...
- Bootstrap-CL:按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...
- eclipse整合tomcat
首先确保jdk已经安装好 步骤1 获得服务器运行环境配置,Window/Preferences/Server/Runtime Environmen l步骤2 添加服务器 步骤3 选择服务器在硬盘的地址 ...
- angular源码剖析之Provider系列--QProvider
QProvider 简介 源码里是这么描述的: A service that helps you run functions asynchronously, and use their return ...
- 51nod 1225:余数之和
传送门 题意 略 分析 \(\sum_i^n(n\%i)=\sum_i^n(n-i*n/i)=n^2-\sum_i^ni*n/i\) \(=\sum r\sum_i^ni[n/i==r]\) 可以证明 ...
- 1856: [Scoi2010]字符串(Catalan数)
1856: [Scoi2010]字符串 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 2117 Solved: 1211[Submit][Status] ...
- 园艺研究生中途自学Java,赶上校招终进美团,分享面试经验
前言 最近,圈子里的很多小伙伴都在面试,有些小伙伴儿拿到不错的offer,今天给大家推荐的这位小伙伴拿到美团点评的校招offer,他将自己这次面试的经历写下来供大家参考,看看你能回答多少? 背景 上海 ...
- 黑客攻防技术宝典web实战篇:工具web服务器习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 在什么情况下 Web 服务器会显示目录列表? 如果请求某目录的 URL 且满足以下条件,W ...
- Luogu P1373 小a和uim之大逃离【dp】By cellur925
题目传送门 $50pts$:容易设计出状态$f[i][j][l][r][st]$表示当前的这个人在($i$,$j$),小a和uim魔瓶中的含量分别为$l$,$r$,当$st=0$表明现在是小a在吃,当 ...
- 安装kibana
下载kibana5.1.1或者5.1.2版本的deb包,然后用dpkg命令安装 安装后启动位置在 /usr/share/kibana/bin中,在该目录下运行 ./kibana 即可启动 启动前应该先 ...