JS 函数sort

<!DOCTYPE html>
<html>
  <head>
    <title>01_define.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    console.log('根据函数的返回值来实现了函数的排序');

    window.onload = show;
        //通过数字来排序
        var as = [1,2,10,6,8,20];
        console.log(as.sort());   //[1, 10, 2, 20, 6, 8]   是根据字符串来排序的,想要通过数字来排序需要传一个函数对象

        console.log('11'+1);  //111
        console.log('11'-1);  //10   动态语言的灵活性,当进行减法的时候会自动完成转化。

        var sortByNumber = function(a,b){
            return a-b;   //所以这里可以自动完成转化,就算as中有字符串"10","22"之类的都可以自动转化。但是"12px"这种就不行了,可以用parseInt来转化return parseInt(a)-parseInt(b)
        }
        console.log(as.sort(sortByNumber));  //[1, 2, 6, 8, 10, 20]  这个函数对象会直接调用

        //通过对象来排序
        var Person = function(name,age){
            this.name  = name;
            this.age = age;
        }
        var p1 = new Person('evy',18);
        var p2 = new Person('lin',15);
        var p3 = new Person('hurk',20);
        var pp = [p1,p2,p3];

        /**
        通过以下两个方法虽然可以排序,但是需要为每一个属性都设置一个函数,显然不灵活
        但是如果通过函数的返回值调用就不一样了  
        */
        /* function sortByName(obj1,obj2){
            if (obj1.name>obj2.name) {  //因为上面是根据数字来排序,所以a-b就可以得到一个值,或者大于0,等于0,小于0,然后浏览器会根据这个值来排序.但是这里是通过对象来排序,obj1.name-obj2.name浏览器并不知道这个值是大于0的数还是小于0的数或者等于0,所以需要return一个数字来表明。
                return 1;
            }else if(obj1.name==obj2.name){
                return 0;
            }else{
                return -1;
            }
        }

        function sortByAge(obj1,obj2){
            return obj1.age-obj2.age;  //因为obj1.age和obj2。age是两个数字,所以可以得到一个值,并且可以知道这个值是不是大于0的数
        } */
        //pp.sort(sortByAge);  //会自动执行sortByAge这个方法(注:事件xx.onclick=init、xx.onmouseover=init等等和window.onload=init都可以直接调用init()函数)
        //pp.sort(sortByName);

        function sortByProperty(propertyName){
            var sortFun = function(obj1,obj2){
                if (obj1[propertyName]>obj2[propertyName]) {
                    return 1;
                }else if(obj1[propertyName]==obj2[propertyName]){
                    return 0;
                }else{
                    return -1;
                }
            }

            return sortFun;
        }
        pp.sort(sortByProperty('age'));
        function show(){
            var content = document.getElementById('content');

            for ( var int = 0; int < pp.length; int++) {
                    content.innerHTML += pp[int].name+','+pp[int].age+'<br/>';          
            }
            //
        }
    </script>
  </head>

  <body>
    This is my HTML page. <br>
    <span id="content"></span>
  </body>
</html>
<think>我们被要求回答关于JavaScriptsort函数的使用方法和示例。根据提供的引用,我们知道sort函数默认将元素转为字符串按Unicode排序,这可能导致数字排序不符合数值顺序。因此,我们需要一个比较函数来实现正确的数字排序。 我们将分为几个部分: 1. 基本使用方法(包括默认行为) 2. 使用比较函数进行自定义排序(特别是数字排序) 3. 示例代码 注意:根据引用[1],我们需要强调默认行为是字符串比较,并且提供比较函数的用法。 示例包括: - 默认排序(字符串排序) - 数字排序(升序和降序) - 对象数组的排序(按某个属性排序) 同时,我们可以简单提及原理:根据引用[2],sort方法在不同浏览器中的实现可能不同(例如V8引擎使用Timsort),但通常是一种稳定的排序算法(在较新版本中)。 最后,生成相关问题。 注意:回答中引用的段落末尾要添加引用标识。由于我们的引用来自站内引用[1][2][3],因此我们将使用[^1][^2][^3]进行标注。 我们开始构建回答。 </think>### JavaScript `sort()` 函数详解 #### 一、基本用法与默认行为 JavaScript 的 `Array.prototype.sort()` 方法用于原地排序数组元素并返回排序后的数组。默认行为是将元素**转换为字符串**后按 Unicode 码点排序: ```javascript const fruits = ['banana', 'Apple', 'cherry']; fruits.sort(); console.log(fruits); // ['Apple', 'banana', 'cherry'](大写字母优先) const numbers = [10, 2, 1, 20]; numbers.sort(); console.log(numbers); // [1, 10, 2, 20](字符串字典序排序)[^1] ``` ⚠️ 警告:默认排序对数字不友好,需自定义比较函数[^2]。 #### 二、自定义比较函数 通过传递比较函数 `(a, b) => number` 实现精准控制: 1. **返回负数**:`a` 排在 `b` 前 2. **返回正数**:`b` 排在 `a` 前 3. **返回 0**:保持相对顺序 **常用示例:** ```javascript // 数字升序排序 [40, 100, 1, 5, 25].sort((a, b) => a - b); // [1, 5, 25, 40, 100] // 数字降序排序 [40, 100, 1, 5, 25].sort((a, b) => b - a); // [100, 40, 25, 5, 1] // 对象数组按属性排序 const users = [ { name: 'John', age: 25 }, { name: 'Alice', age: 30 } ]; users.sort((a, b) => a.age - b.age); // 按年龄升序 ``` #### 三、底层原理与特性 1. **稳定性**:现代浏览器(Chrome≥70, Firefox≥3)实现**稳定排序**,相同值保持原始顺序[^2] 2. **算法实现**:V8 引擎使用混合排序策略(Timsort),结合归并排序和插入排序 3. **性能**:平均时间复杂度 $O(n \log n)$,最坏情况 $O(n^2)$ 4. **原地修改**:直接改变原数组,无副本生成 #### 四、复杂场景示例 ```javascript // 多条件排序(先按年龄降序,同年龄按名字字母序) users.sort((a, b) => { if (a.age !== b.age) return b.age - a.age; return a.name.localeCompare(b.name); }); // 安全排序:避免修改原数组 const sorted = [...users].sort(compareFn); ``` > **注意点**:比较函数需满足[纯函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#%E6%8F%8F%E8%BF%B0)要求,避免副作用。对大型数组建议使用 `TypedArray` 获得更好性能。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值