suchen
HeimWeb-Frontendjs-TutorialJS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Der Inhalt dieses Artikels befasst sich mit dem JS-Prototyp eines gekapselten Arrays: Eine Einführung in die Verwendung der Sortiermethode. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Basierend auf der nativen JS-Kapselung der Sortiermethode auf dem Array-Prototyp

Ich habe kürzlich etwas über die Kapselung integrierter Methoden auf dem Array-Prototyp erfahren, was meine Fähigkeit zur Kapselung gestärkt hat Methoden mit nativem JS und weiterem Verständnis des Prozesses der Kapselung von Array-Methoden und der implementierten Funktionen. Obwohl ich nicht tief in die unterste Ebene gegangen bin und den Quellcode verstanden habe. Die folgenden Lösungen basieren alle auf persönlichem Verständnis der Funktionen, die mit reinem nativem JS implementiert werden. Wenn etwas nicht stimmt, können Sie es mir in den Kommentaren mitteilen

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

Die Sortiermethode wird hauptsächlich zum Sortieren von Arrays verwendet
Parameter In zwei Typen unterteilt:

  • Erstens: Die übergebenen Parameter sind Funktionen (die Sortierung hängt hauptsächlich vom Rückgabewert der Funktion ab)

  • Das andere: Was übergeben wird, ist keine Funktion oder wird nicht übergeben (solange das übergebene Element keine Funktion ist, hat es keinen Einfluss auf den ursprünglichen Sortierprozess)
    Der Rückgabewert der Methode ist das sortierte Array des ursprünglichen Arrays
    Das ursprüngliche Array hat sich geändert, es ist das sortierte Array Array

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

情况1:Keine Parameter zum Implementieren der Sortierung von String-Arrays
情况2:Keine Parameter-Implementierung zum Sortieren von Arrays vom Typ Zahl
情况3:Keine Parameter-Implementierung zum Sortieren von Arrays gemischter Typen wie z als Zeichenfolgen und Zahlen
情况4:Mit Parametern zum Implementieren der Sortierung numerischer Daten vom Typ Zahl
情况5:Mit Parametern sortiert sort() die benutzerdefinierten Attribute der einfachen Objektliste
情况6:Mit Parametern, Es implementiert die Sortierung von Arrays gemischter Zeichenfolgen- und Zahlentypen

sort方法对参数的处理:

Fall 1: Wenn der Parameter keine Funktion ist, es hat keinen Einfluss auf den ursprünglichen Sortiervorgang
Fall 2: Wenn der Parameter eine Funktion ist, basiert er auf dem Rückgabewert in der Callback-Funktion Sort. Ist der Rückgabewert größer als 0, werden die Positionen vertauscht; ist der Rückgabewert kleiner als 0, werden die Positionen nicht vertauscht
Ist der Rückgabewert keine Zahl, werden die Positionen nicht vertauscht

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

Grundprinzip: ohne Parameter (und die Parameter mit sind keine Funktionen): standardmäßige aufsteigende Reihenfolge
Ohne Parameter direkt in Zeichenfolgen konvertieren und ASCII einzeln vergleichen. Der Wert des Codes
wird nicht ausgetauscht, solange einer ein Objekt ist {}
Wenn der Parameter eine Funktion ist:
Vergleichen Sie entsprechend dem Rückgabewert der Funktion; wenn der Rückgabewert der Funktion größer als 0 ist; dann tauschen Sie die Position aus

实现代码如下:

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;
};

实验结果

Kein Parameter (Parameter nicht- Funktion) Sortieren von rein numerischen Arrays

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Sortieren von rein numerischen Arrays mit Parametern (aufsteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Sortieren von reine numerische Arrays mit Parametern (absteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Keine Parameter (Parameter sind keine Funktionen) Sortierung rein alphabetischer String-Arrays

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (Parameter sind Funktionen) Sortierung von rein alphabetischen String-Arrays Sortierung (aufsteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen) Sortierung (absteigende Reihenfolge) von reine alphabetische String-Arrays

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Keine Parameter (Parameter sind keine Funktionen) Sortierung von reinen Buchstaben-Strings, numerischen Buchstabenkombinations-Strings und reinen numerischen String-Kombinationen

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (Parameter sind Funktionen) Sortieren von Ergebnissen (in aufsteigender Reihenfolge) von Kombinationen aus reinen alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, reinen numerischen Zeichenfolgen usw.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen) für reine Kombinationssortierungsergebnisse von alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, reinen numerischen Zeichenfolgen usw. (absteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Keine Parameter (Parameter sind keine Funktionen) für reine alphabetische Zeichen Kombinationssortierungsergebnisse von Zeichenfolgen, reinen Zahlen, numerischen Buchstabenfolgen, reinen numerischen Zeichenfolgen usw.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen) werden die Sortierergebnisse (in aufsteigender Reihenfolge) von Kombinationen aus reinen alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, reinen numerischen Zeichenfolgen usw. angezeigt.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen), die Sortierergebnisse (absteigende Reihenfolge) von Kombinationen aus reinen alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, reinen numerischen Zeichenfolgen usw.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Keine Parameter (Parameter sind keine Funktionen) sortieren Arrays, reine alphabetische Zeichenfolgen, reine Zahlen, numerische alphabetische Zeichenfolgen, reine numerische Zeichenfolgen usw.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

mit Parameter (Parameter sind Funktionen) Sortieren von Arrays, reinen alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, rein numerischen Zeichenfolgen usw. (in aufsteigender Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen) Paar Sortierung (absteigende Reihenfolge) von Arrays, reinen alphabetischen Zeichenfolgen, reinen Zahlen, numerischen alphabetischen Zeichenfolgen, reinen numerischen Zeichenfolgen usw.

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Mit Parametern (die Parameter sind Funktionen) für reine Arrays. Sortierung (aufsteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Sortierung von reinen Arrays (absteigende Reihenfolge) mit Parametern (Parameter sind Funktionen)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Sortierung reiner Objekte mit Parametern (die Parameter sind Funktionen) (aufsteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Sortierung reiner Objekte mit Parametern (die Parameter sind Funktionen) ( absteigende Reihenfolge)

JS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode

Verwandte Empfehlungen:

Analyse der Kapselung von Scrolling-Listenkomponenten in Angular 6

Das obige ist der detaillierte Inhalt vonJS-Prototyp eines gekapselten Arrays: Einführung in die Verwendung der Sortiermethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
JavaScript und das Web: Kernfunktionalität und AnwendungsfälleJavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Verständnis der JavaScript -Engine: ImplementierungsdetailsVerständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitPython vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenPython gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertVon C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools