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 数组元素排序?的更多相关文章

  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. npm 脚本

    查看安装的包: npm list -g --depth 0 考虑到用CLI这种方式来运行本地的webpack不是特别方便,我们可以设置一个快捷方式,在package.json添加一个npm脚本(npm ...

  2. Gearman1.1.12安装与启动

    1)安装 a)安装gcc4.4环境: i.  yum install gcc44 gcc44-c++ libstdc++44-devel gcc-c++ -y ii. 在/etc/profile中添加 ...

  3. auto_ptr智能指针

    C++的auto_ptr所做的事情,就是动态分配对象以及当对象不再需要时自动执行清理. 使用std::auto_ptr,要#include <memory>.

  4. excel中需要熟练掌握技能

    一.排版篇: 给他人发送excel前,请尽量将光标定位在需要他人首先阅览的位置,例如Home位置(A1),例如结论sheet,长表尽量将位置定位到最顶端 有必要的时候请冻结首行:没必要但可追究的内容, ...

  5. DB Link 去除域名

    1.查看global_name的设置 SQL> show parameters global_name; NAME                                 TYPE    ...

  6. sql server编写一个语句脚本自动清空各表数据以初始化数据库

    问题:有时已有项目要移植,例如原来在广州地区使用的某系统,突然说惠州那边也要用这套一样的系统.或者,在demo环境下弄了一些测试数据.然后要清空全部表数据.如果表比较多的话,逐个表手工编写脚本就太麻烦 ...

  7. DataGridTemplateColumn 如何获取内部控件

    WPF中有时候我们不使用DataGridTextColumn 而使用用途更加宽广的DataGridTemplateColumn 但是用途多的东西当然也更复杂. 这里说下如何取DataGridTempa ...

  8. 安装截图软件shutter

    直接进入软件中心安装吧 不知道软件中心安装的软件可以apt upgrade 命令更新么 应该是可以的,感觉软件中心就是个图形化的apt和新立得差不多 shutter可以放大缩小截图, ctrl + 鼠 ...

  9. hdu1151 Air Raid 基础匈牙利

    #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm> ...

  10. 桌面应用也可以提供HTTP文件下载

    以往,我们肯定知道,在搞Web应用的时候,我们都可能会遇到提供文件下载的功能需求,比如我以前做的一个客户许可证管理系统,客户购买ERP系统后,通常我们会根据客户的机器的机器码生成一个许可文件,而这个许 ...