首頁 > web前端 > js教程 > JS封裝數組原型:sort方法的使用介紹

JS封裝數組原型:sort方法的使用介紹

不言
發布: 2018-07-27 11:31:38
原創
2143 人瀏覽過

這篇文章要跟大家介紹的文章內容是關於JS封裝陣列原型:sort方法的使用介紹,有很好的參考價值,希望可以幫助到有需要的朋友。

基於原生JS封裝陣列原型上的sort方法

最近學習了陣列的原型上內建方法的封裝,加強了用原生JS封裝方法的能力,也進一步理解數組方法封裝的過程,實現的功能。雖然沒有深入底層,了解源碼。以下解法都是基於個人理解用純原生JS實現的功能。如有不對的地方,可以評論告訴我喲

首先,我們先來看sort方法的作用、參數、以及方法的回傳值,原有數組是否發生改變

sort方法主要用於陣列的排序
參數分為兩種:

  • 一種:傳的參數是函數、(排序主要看函數的返回值)

  • 另一種:傳的不是函數、或不傳(只要傳的不是函數就對原來排序過程不產生影響)
    方法的回傳值是原來陣列排序後的陣列
    原來陣列改變,是排序後的陣列





# #其次,我們來看sort方法要處理的各種情況之間的比較

#情況1:無參實作對字串數組的排序情況2:無參實作對number類型的陣列進行排序

情況3:

無參實作對字串、number等混合類型的陣列的排序

情況4:

帶參實現對number類型的數值資料排序

#情況5:帶參詞sort()對簡單物件List的自訂屬性排序情況6:帶參實作對字串、number混合型別的陣列的排序



sort方法對參數的處理:

情況1:如果參數不是函數,則不影響原來排序過程情況2:如果參數是函數,則根據回呼函數中的傳回值進行排序。如果傳回值大於0,則交換位置;如果傳回值小於0,則不交換位置如果傳回值不是一個數字,則不交換位置

基於以上情況的討論,sort方法實現的核心原理如下:

JS封裝數組原型:sort方法的使用介紹

核心原理:不帶參(以及帶的參數不是函數)的情況下:默認升序排列

不帶參的情況下,直接轉字串,逐一比較ASCII碼的值

只要有一個是物件{}就不交換

帶參數為函數的情況下:JS封裝數組原型:sort方法的使用介紹根據函數的傳回值進行比較;如果函數傳回值大於0;則交換位置

實作程式碼如下:JS封裝數組原型:sort方法的使用介紹

Array.prototype.mySort = function(fn){
    if(Object.prototype.toString.call(fn)==='[object Function]'){
        //如果传进来参数的是函数
        for(var i = 0;i<this.length-1;i++){
            //遍历数组,将前后两项作为实参传给fn
            if(fn.call(this,this[i],this[i+1])>0){
                //如果fn执行之后的返回值大于0.就调用swap方法交换位置
                var a = this[i],b=this[i+1];
                this[i] = swap(a,b).a;
                this[i+1] = swap(a,b).b;
                //交换之后,如果当前项不是第一项,则当前项(索引为i的项)继续跟前面的项进行比较
                if(i>0){
                    for(var j = i-1;j>=0;j--){
                            if(fn.call(this,this[j],this[j+1])>0){
                                var a = this[j],b=this[j+1];
                                this[j] = swap(a,b).a;
                                this[j+1] = swap(a,b).b;
                            }
                        }
                }
            }
        }
    }else{
        //如果不是函数,则按正常排序
        //遍历数组,将前后两项进行比较
        for(var i = 0;i<this.length-1;i++){
            var cur = this[i];//当前项
            var next = this[i+1];//下一项
            if(comASCII(cur,next)){
                //当返回true的时候交换,并且交换完成之后,当前项继续往前比较
                this[i] = swap(cur,next).a;
                this[i+1] = swap(cur,next).b;
                //当前项继续向前比较
                if(i>0){
                    for(var k = i-1;k>=0;k--){
                        var cur = this[k];
                        var next = this[k+1];
                        if(comASCII(cur,next)){
                            this[k] = swap(cur,next).a;
                            this[k+1] = swap(cur,next).b;
                        }
                    }
                }
            }
        }
    }
    //封装一个交换位置的函数
    function swap(a,b){
        return {
            a:b,
            b:a
        }
    }
    //如果不传参的情况下比较ASCII码
    function comASCII(cur,next){
        //全部转换为字符串、逐项比较ASCII码
        cur = cur.toString();
        next = next.toString();
        //取长度最大值
        var len = cur.length>next.length?next.length:cur.length;
        //当前后两项都不是不是{}类型的数据时,进行比较
        if(cur!==&#39;[object Object]&#39;&&next!==&#39;[object Object]&#39;){
            for(var j = 0;j<len;j++){
                if(!isNaN(cur.charCodeAt(j))&&!isNaN(next.charCodeAt(j))){
                    //如果二者的ASCII码都是有效数字
                    if(cur.charCodeAt(j)>next.charCodeAt(j)){
                        //如果前一项比后一项当前的ASCII码大,则返回true,交换位置
                        return true;
                    }else if(cur.charCodeAt(j)==next.charCodeAt(j)){
                    //如果相等直接进入下一轮循环
                            continue;
                        }else{
                        //前项比后项小,直接返回false
                            return false;
                        }
                }
            }
            if(!isNaN(cur.charCodeAt(len))&&isNaN(next.charCodeAt(len))&&(cur.charCodeAt(len-1)==next.charCodeAt(len-1))){
                //比较完之后,如果前一项ASCII还是有效数字,说明前项比后项大,交换
                return true;
            }
        }
        //如果上述条件不满足,则不交换
        return false;
    }
    //返回当前数组
    return this;
};
登入後複製

實驗結果

JS封裝數組原型:sort方法的使用介紹

無參(參數非函數)對純數字數組的排序

JS封裝數組原型:sort方法的使用介紹

帶參對純數字數組的排序(升序)

JS封裝數組原型:sort方法的使用介紹

帶參對純數字數組的排序(降序)

JS封裝數組原型:sort方法的使用介紹

#無參(參數非函數)對純字母字串陣列的排序

JS封裝數組原型:sort方法的使用介紹

帶參(參數是函數)對純字母字串陣列的排序(升序)

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對純字母字串陣列的排序(降序)

JS封裝數組原型:sort方法的使用介紹

#無參(參數非函數)對純字母字串、數字字母組合字串、純數字字串組合的排序###############帶參(參數是函數)對純字母字串、純數字、數字字母字串、純數字字串等的組合排序結果(升序)###############帶參(參數是函數)對純字母字串、純數字、數字字母字串、純數字字串等的組合排序結果(降序)###############無參(參數非函數)對純字母字串、純數字、數字字母字串、純數字字串等的組合排序結果## ##########

帶參(參數是函數)對純字母字串、純數字、數字字母字串、純數字字串等的組合排序結果(升序)

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對純字母字串、純數字、數字字母字串、純數字字串等的組合排序結果(降序)

JS封裝數組原型:sort方法的使用介紹

無參(參數非函數)對陣列、純字母字串、純數字、數字字母字串、純數字字串等的排序

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對陣列、純字母字串、純數字、數字字母字串、純數字字串等的排序(升序)

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對陣列、純字母字串、純數字、數字字母字串、純數字字串等的排序(降序)

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對純數組的排序(升序)

JS封裝數組原型:sort方法的使用介紹

帶參(參數是函數)對純數組的排序(降序)

JS封裝數組原型:sort方法的使用介紹

帶參(參數是函數)對純物件的排序(升序)

JS封裝數組原型:sort方法的使用介紹

#帶參(參數是函數)對純物件的排序(降序)

JS封裝數組原型:sort方法的使用介紹

相關推薦:

##對Angular 6中滾動清單元件的封裝的分析

以上是JS封裝數組原型:sort方法的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板