zoukankan      html  css  js  c++  java
  • 数组对象方法排序

    数组对象方法排序:
     
    function sortByKey(array,key){
        return array.sort(function(a,b){
          var x=a[key];
          var y=b[key];
          return ((x<y)?-1:((x>y)?1:0));
       });
    }
     
    示例如下:该例子配合使用的是vue
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
        <script src="../assets/js/vue.js"></script>
    </head>
    <body>
        <h1>v-for</h1>
        <hr>
        <div id="app">
            <ul>
                <li v-for="item in setItems">{{item}}</li>
            </ul>
            <hr>
            <ul>
                <li v-for="(student,index) in setStudents">
                    {{index+1}}:{{student.name}}-{{student.age}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    items: [53,23,7,14],
                    students:[
                        {name:'tpp', age: 25},
                        {name:'ldh', age: 27},
                        {name:'jxy', age: 24},
                        {name:'whh', age: 28},
                        {name:'xuj', age: 4}
                    ]
                },
                computed:{//计算属性,会保护items原有的值,所以需要重新定义名字
                    setItems:function(){
                        return this.items.sort(sortNum);
                    },
                    setStudents: function(){
                        return sortByKey(this.students,'age')
                    }
                }
            });
            function sortNum(a,b){//数字从小到大的排序函数
                return a-b;
            };
            //数组对象方法排序:
            function sortByKey(array,key){
                return array.sort(function(a,b){
                  var x=a[key];
                  var y=b[key];
                  return ((x<y)?-1:((x>y)?1:0));
                });
            }
        </script>
    </body>
    </html>

  • 相关阅读:
    网络编程基础之TCP编程学习(一)
    日常巡检(脚本)
    Mysql主主配置
    创建用户和相对应的随机密码
    企业网络连接测试
    Docker 方式部署 Gitlab 并使用自定义的http端口
    Vue学习笔记(二):使用Axios进行跨域请求
    Vue学习笔记(一):引入Bootstrap和jQuery
    C# / .NET Core 调用javascript方法(适用于Windows/Linux平台)
    Centos7.7安装bcm43142(博通)无线网卡驱动
  • 原文地址:https://www.cnblogs.com/happybread/p/8312978.html
Copyright © 2011-2022 走看看