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. 一个简单的backbone实例(基于139邮箱)

    先看一下效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta http-equ ...

  2. bzoj2676

    二分概率+矩乘+dp 也是二分概率,然后dp[i][j][k]表示当前到了i,有j条命,下一次的收益是k,然后矩乘转移,但是我自己的似乎wa了,抄了liu_runda的才行,具体不知道为什么 注释的是 ...

  3. Struts2 文件上传 之 文件类型 allowedTypes

     转自:https://www.cnblogs.com/zxwBj/p/8546889.html '.a'      : 'application/octet-stream', '.ai'     : ...

  4. Java调用外部类定义的方法(Static与无Static两种)

    首先定义方法 public class Dy { public int Add(int x,int y){ //定义Add(),该方法没有被static修饰 return x+y; } public ...

  5. Centos系统真机安装,U盘方式

    下载Centos系统镜像,建议选择Minimal ISO.下载地址:https://www.centos.org/download/ 下载Fedora Media Writer,用来将系统镜像写到U盘 ...

  6. 折半插入排序 之通俗易懂,图文+代码详解-java编程

    转自http://blog.csdn.net/nzfxx/article/details/51615439 1.特点及概念介绍 下面给大家讲解一下"二分法查找"这个java基础查找 ...

  7. Ubuntu16.04 : 用友善提供的4.5.1解压后,运行/opt/FriendlyARM/toolschain/4.5.1/bin/arm-linux-gcc -v出错

    通过查阅百度和谷歌,以下解决方法: The problem has been solved, because I installed the amd64.iso linux system,so fir ...

  8. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时24&&25

    课时24 深度学习开源库使用介绍(上) Caffe 被用于重新实现AlexNet,然后用AlexNet的特征来解决其他事情 用C++书写的,可以去GitHub上面读取源代码 主要四个类: Blob可以 ...

  9. 关于 android 中 postDelayed方法的讲解 (转载)

    转自:http://blog.csdn.net/xiabo851205/article/details/7991529 这是一种可以创建多线程消息的函数 使用方法: 1,首先创建一个Handler对象 ...

  10. 一篇文章搞定面试中的二叉树题目(java实现)

    最近总结了一些数据结构和算法相关的题目,这是第一篇文章,关于二叉树的. 先上二叉树的数据结构: class TreeNode{ int val; //左孩子 TreeNode left; //右孩子 ...