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

    一、简介
    首先,我们来看一下JS中sort()和reverse()这两个函数的函数吧
    reverse();这个函数是用来进行倒序,这个没有什么可说的,所谓倒序就是大的在前面,小的在后面。

      比如:

      var array1 = [0,1,5,10,15];

      array1.reverse();//结果为:15,10,5,1,0

        sort([参数]);这个函数是用来对数组进行正序排列的,

      var array1 = [0,1,5,10,15];

      array1.sort();//结果为:0,1,10,15,5

      注:sort() 方法可以接受一个 方法为参数 ,这个方法有两个参数。分别代表每次排序比较时的两个数组项。sort()排序时每次比较两个数组项都回执行这个参数,并把两个比较的数组项作为参数传递 给这个函数。当函数返回值为1的时候就交换两个数组项的顺序,否则就不交换。

    有时候,我们大家在进行排序,尤其是数组排序。有可能,我们只是想去排列一组数据中的某一个数据的时候。如下面的这个例子。

      var data = [{name:"Tom",age:"28"},{name:"Cat",age:"29"}...];

    我们只是想对这组数据中的name或age进行排序,这个时候大家就会发现,使用JS中的自代的函数sort()就不能解决这类型的问题。哪么此篇文章就是解决这个问题?

    在简述一下此问题:假设有一个对象数组,我们想要根据某个对象属性对数组进行排序。而传递给数组sort()方法的比较函数要接收两个参数,这两个参数就是比较的值。可是,我们需要一种方式来指明按照哪个属性来排序。而sort()方法只能接受一个参数,这个时候,我们就可以利用一下JS自定义函数的特点来做。好吧,我们来看下。

       看到上图,大家可能有点懵,这个函数定义看起来有点复杂,但实际上无非就是在这个函数的内部嵌套了另一函数,而且,这个内部的函数前面加了一个return操作符。在内部函数接收到pName参数后,使用方括号(可以看作数组取值)表示法来取得指定属性的值。那么,这里大家可能有点不明白,就是我们上篇文章在讲解的时候,明明sort在传递的参数只是一个不带参数的函数。这里我们可以回顾一下,JS函数的相关定义:要访问函数的指针而不执行函数的话,必须去掉函数后面的哪对圆括号。并且,ECMAscript中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数把一样把一个函数函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。


    二、数字数组

    1.默认ASCII字符顺寻

    $(function () {
    //Javascript数组排序
    var nums = [8, 10, 2, 3, 1,100];
    //默认ASII字符排序,升序
    nums.sort();

    //将默认ASCII字符排序反转
    nums.reverse();

    //遍历输出
    for (var i = 0; i < nums.length; i++) {
    $("#orderUl").append("<li>"+nums[i]+"</li>");;
    }
    });

    <ul id="orderUl"></ul>

     ascii升序显示结果:   ascii降序显示:
     
    Javascript数组排序 - 天马hygj - Nothing
     
    Javascript数组排序 - 天马hygj - Nothing

        
    2.数字数组升序和降序

    $(function () {
    //Javascript数组排序
    var nums = [8, 10, 2, 3, 1,100];
    //升序排列
    nums.sort(function (a, b) {
    return a > b ? 1 : -1;
    });

    //降序排列
    nums.sort(function (a,b) {
    return a < b ? 1 : -1;
    });

    //遍历输出
    for (var i = 0; i < nums.length; i++) {
    $("#orderUl").append("<li>"+nums[i]+"</li>");;
    }
    });

     升序排列:  降序排列:
    Javascript数组排序 - 天马hygj - Nothing
     
    Javascript数组排序 - 天马hygj - Nothing


    三。混合数组

    //混合数组
    var nums = ['a', 10, 'w', '2',100, 'b','array'];
    nums.sort();//按ascii字符顺序排序
    //升序排序,顺序打乱
    nums.sort(function (a, b) {
    return a > b ? 1 : -1;
    });

    //遍历输出
    for (var i = 0; i < nums.length; i++) {
    $("#orderUl").append("<li>"+nums[i]+"</li>");;
    }

     Asciii升序  按大小升序
     
    Javascript数组排序 - 天马hygj - Nothing
     
    Javascript数组排序 - 天马hygj - Nothing

       
    三、json数组

    //josn数组
    var nums = [
    { id:3,name: 'da', age: 25,remark:'a' },
    { id: 1, name: 'alla', age: 21, remark: 'd' },
    { id: 4, name: 'cs', age: 22, remark: 'b' },
    { id: 2, name: 'bs', age: 29, remark: 'c' },
    ];
    nums.sort();//默认根据第一个字符串列按ascii字符顺序排序
    function orderBy(age) {//排序函数升序,调用时指定排序列
    return function (object1, object2) {
    var val1 = object1[age];
    var val2 = object2[age];
    if (val1 < val2) return -1;
    else if (val1 > val2) return 1;
    else return 0;
    }
    }
    nums.sort(orderBy('age'));

    //遍历输出
    for (var i = 0; i < nums.length; i++) {
    $("#orderUl").append("<li>" + nums[i].id + "--" + nums[i].name + "--" + nums[i].age + "--" + nums[i].remark + "</li>");;
    }

     默认排序
     指定age排序
     指定remark排序
     
    Javascript数组排序 - 天马hygj - Nothing
     
    Javascript数组排序 - 天马hygj - Nothing
    Javascript数组排序 - 天马hygj - Nothing
    默认根据json对象第一个字符串列按ascii排序
    按age数字列升序
    按reamark字符列排序

  • 相关阅读:
    记录相关操作
    mysql数据类型
    完整性约束
    表相关操作
    MySQL存储引擎
    库相关操作
    linux学习笔记2---命令cd
    linux学习笔记命令篇1---命令ls
    linux常用命令系列
    redis34--string 操作
  • 原文地址:https://www.cnblogs.com/tianma3798/p/10580009.html
Copyright © 2011-2022 走看看