Maison > interface Web > js tutoriel > Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

不言
Libérer: 2018-07-27 11:31:38
original
2117 Les gens l'ont consulté

Le contenu de cet article concerne le prototype de tableau encapsulé JS : une introduction à l'utilisation de la méthode de tri. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Basé sur l'encapsulation JS native de la méthode de tri sur le prototype du tableau

J'ai récemment découvert l'encapsulation des méthodes intégrées sur le prototype du tableau, ce qui a renforcé ma capacité à encapsuler méthodes avec JS natif et compréhension plus approfondie du processus d'encapsulation des méthodes de tableau et des fonctions implémentées. Bien que je n'ai pas approfondi la couche inférieure et compris le code source. Les solutions suivantes sont toutes basées sur une compréhension personnelle des fonctions implémentées à l'aide de JS natif pur. S'il y a quelque chose qui ne va pas, vous pouvez me le dire dans les commentaires

首先,我们先来看一下sort方法的作用、参数、以及方法的返回值,原有数组是否发生改变

La méthode de tri est principalement utilisée pour trier les tableaux
paramètres Divisés en deux types :

  • Un : les paramètres passés sont des fonctions, (le tri dépend principalement de la valeur de retour de la fonction)

  • L'autre : Ce qui est passé n'est pas une fonction, ou n'est pas passé (tant que ce qui est passé n'est pas une fonction, cela n'aura aucun impact sur le processus de tri d'origine)
    La valeur de retour de la méthode est le tableau trié du tableau d'origine
    Le tableau d'origine a changé, c'est le tableau trié Array

其次,我们来看一下sort方法要处理的各种情况之间的比较

情况1:Aucun paramètre pour implémenter le tri des tableaux de chaînes
情况2:Implémentation sans paramètre pour trier les tableaux de type numéro
情况3:Implémentation sans paramètre pour trier les tableaux de types mixtes tels que sous forme de chaînes et de nombres
情况4:Avec des paramètres pour implémenter le tri des données numériques de type numéro
情况5:Avec des paramètres, sort() trie les attributs personnalisés de l'objet simple List
情况6:Avec des paramètres, il implémente le tri de tableaux de types mixtes de chaînes et de nombres

sort方法对参数的处理:

Cas 1 : Si le paramètre n'est pas une fonction, cela n'affecte pas le processus de tri d'origine
Cas 2 : Si le paramètre est une fonction, il est basé sur la valeur de retour dans la fonction de rappel Sort. Si la valeur de retour est supérieure à 0, les positions sont échangées ; si la valeur de retour est inférieure à 0, les positions ne sont pas échangées
Si la valeur de retour n'est pas un nombre, les positions ne sont pas échangées

基于以上情况的讨论,sort方法实现的核心原理如下:

Principe de base : sans paramètres (et les paramètres avec ne sont pas des fonctions) : ordre croissant par défaut
Sans paramètres, convertir directement en chaînes et comparez les ASCII un par un La valeur du code
ne sera pas échangée tant que l'on est un objet {}
Lorsque le paramètre est une fonction :
Comparez selon la valeur de retour de la fonction ; si la valeur de retour de la fonction est supérieure à 0 ; alors échangez la position

实现代码如下:

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;
};
Copier après la connexion

实验结果

Aucun paramètre (paramètres ne sont pas des fonctions) tri de tableaux numériques purs

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri de tableaux numériques purs avec paramètres (ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri de tableaux numériques purs avec paramètres (ordre décroissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri de tableaux de chaînes alphabétiques purs sans paramètres (les paramètres ne sont pas des fonctions)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions) pour les chaînes alphabétiques pures Tri des tableaux (ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions) Tri des chaînes alphabétiques pures tableaux (ordre décroissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Aucun paramètre (les paramètres ne sont pas des fonctions) Tri des chaînes de lettres pures, des chaînes de combinaisons de lettres numériques et des combinaisons de chaînes numériques pures

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont Fonction) Trie la combinaison de chaînes alphabétiques pures, de nombres purs, de chaînes alphabétiques numériques, de chaînes numériques pures, etc. (par ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions) Résultats de tri (ordre décroissant) de combinaisons de chaînes alphabétiques pures, de nombres purs, de chaînes alphabétiques numériques, de chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Aucun paramètre (les paramètres ne sont pas des fonctions) pour les résultats de tri par combinaison pure de chaînes alphabétiques, de nombres purs, de chaînes alphabétiques numériques, de chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions), les résultats du tri (par ordre croissant) de combinaisons de chaînes alphabétiques pures, de nombres purs, de chaînes alphabétiques numériques, de chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions), les résultats du tri (ordre décroissant) des combinaisons de chaînes alphabétiques pures, de nombres purs, de chaînes alphabétiques numériques, de chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Aucun Paramètres (les paramètres ne sont pas des fonctions) trient des tableaux, des chaînes alphabétiques pures, des nombres purs, des chaînes alphabétiques numériques, des chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

avec paramètres (les paramètres sont des fonctions) Trier les tableaux, les chaînes alphabétiques pures, les nombres purs, les chaînes alphabétiques numériques, les chaînes numériques pures, etc. (par ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les les paramètres sont des fonctions) paire Tri (ordre décroissant) de tableaux, chaînes alphabétiques pures, nombres purs, chaînes alphabétiques numériques, chaînes numériques pures, etc.

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Avec paramètres (les paramètres sont des fonctions) pour les tableaux purs Tri (ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri des tableaux purs (ordre décroissant) avec paramètres (les paramètres sont des fonctions)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri des objets purs avec paramètres (les paramètres sont des fonctions) (ordre croissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Tri des objets purs avec paramètres (les paramètres sont des fonctions) ( ordre décroissant)

Prototype de tableau encapsulé JS : introduction à l'utilisation de la méthode de tri

Recommandations associées :

Analyse de l'encapsulation des composants de liste déroulante dans Angular 6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal