zoukankan      html  css  js  c++  java
  • jquery数组(排序)

    HTML:

    1 <h3>字符串数组排序前</h3>
    2 <div id="show5"></div>
    3 <h3>排序后</h3>
    4 <div id="show6"></div>

    jquery:

    var animals = ['dog','cat','tiger','pig','bird'];
    $('#show5').html(animals.join('<br/>'));
    
              
    animals = animals.sort();
    $('#show6').html(animals.join('<br/>'));

    显示结果:

    复制代码
    字符串数组排序前
    dog
    cat
    tiger
    pig
    bird
    排序后
    bird
    cat
    dog
    pig
    tiger
    复制代码

    如果数组换成了数值数组呢?结果会什么怎么样的?

    如下:

    HTML:

    <h3>数值数组排序前</h3>
    <div id="show7"></div>
    <h3>排序后</h3>
    <div id="show8"></div>

    jquery:

    ar nums = ['12','2','5','36','4'];
    $('#show7').html(nums.join('<br/>'));
           
    nums = nums.sort();
    $('#show8').html(nums.join('<br/>'));

    显示结果:

    复制代码
    数值数组排序前
    12
    2
    5
    36
    4
    排序后
    12
    2
    36
    4
    5
    复制代码

    很明显,数值数组最后的排序结果不是我们想要的。这是为什么呢?
    因为sort()方法排序,是基于ASCII值进行排序的。故它会认为36小于4(因为3的ASCII值小于4的ASCII值)。所以要对排序的sort()方法定义一个比较函数:

    jquery:

    复制代码
    ar nums = ['12','2','5','36','4'];
    $('#show7').html(nums.join('<br/>'));
    
    //定义了sort的比较函数
    nums = nums.sort(function(a,b){
    return a-b;
    });
    
    $('#show8').html(nums.join('<br/>'));
    复制代码

    显示结果:

    复制代码
    数值数组排序前
    12
    2
    5
    36
    4
    排序后
    2
    4
    5
    12
    36
    复制代码

    这才是我想要的结果!

    知识点:

    1,sort(function(a,b){return a-b;})对传入的一对值进行比较,然后返回的的值为:小于0,大于0,等于0;(大于0交换位置,反之则不)

      * 当小于0时,说明b>a,故b的排序靠后(即不变).

      * 当大于0时,说明a>b,故a的排序靠后.

      * 当等于0时,说明a=b,故不改变排序.

    如果对数值数组的值进行降序排序。那么只要把返回的值改为b-a!

    个人觉得这个方法包含了排序算法的实现过程

  • 相关阅读:
    【前端_js】前端跨网络异步获取资源——fetch()
    【前端_React】React小书
    【前端_js】JQuery DataTables插件的使用
    【前端_js】解决ajax跨域请求数据
    event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化
    ASP.NET MVC 上传大文件时404
    使用Zen coding高效编写html代码
    CSS 去除列表项li前面的小圆点
    谈谈CSS的布局,display、position、float
    JS引用类型之——RegExp
  • 原文地址:https://www.cnblogs.com/telwanggs/p/5626602.html
Copyright © 2011-2022 走看看