Gemeinsame Methoden der nativen JS-Organisation

Mit der rasanten Entwicklung des Front-End-Marktes erfordert der aktuelle Markt, dass Talente immer mehr Fähigkeiten beherrschen. Heute werde ich einige native JS-Verschlüsse, Vererbung, Prototypenkette und Knoten zusammenfassen Ihr Front-End-Weg. Hilfreich

Das Folgende ist eine persönliche Zusammenfassung, und einige werden jetzt zum einfachen Nachschlagen in der Zukunft zusammengestellt (ich hoffe, dass jeder darauf hinweisen kann). Ich werde sie schnellstmöglich korrigieren.

1. !! wird in einen booleschen Wert umgewandelt
Es wird danach beurteilt, ob der zu beurteilende Wert ein wahrer Wert oder ein falscher Wert ist , und die Prothese gibt in diesem Fall zusätzlich zum falschen Wert den Rest als wahren Wert zurück.

Zu den falschen Werten gehören: , 0 , "" , null , undefiniert , false , NaN,

Außer diesen 6 sind alle anderen „wahr“, einschließlich Objekte, Arrays, Regelmäßigkeit, Funktionen usw.
Hinweis: „0“, „null“, „false“, {}, [] sind ebenfalls wahre Werte.
Dann schauen wir uns an, wie!! ein boolescher Wert konvertiert wird.
Zum Beispiel:
Zuerst deklarieren wir 3 Variablen, x ist null, y ist leer String, str ist ein String, mal sehen, was passiert, nachdem sie „!!“ Ergebnis hinzugefügt haben.

var x=null; var str="abcd"; console.log(!!y) // false; log(!!str) // true;

Wie oben erwähnt, geben falsche Werte false und wahre Werte true zurück.

2. Fügen Sie ein ➕-Zeichen vor str hinzu. +str erzwingt die Konvertierung in eine Zahl.
Fügen Sie ein + vor der Zeichenfolge hinzu, um die Konvertierung in eine Zahl zu erzwingen.

var str="88"; console.log(+str) // 88 //Wenn es sich jedoch um eine Zeichenfolge gemischten Typs handelt, wird sie in NaN konvertiert. var b="1606e"; ( +b) // NaN

3. Unzuverlässig undefiniert Zuverlässig void 0
Angenommen, wir möchten in JavaScript feststellen, ob ein Element undefiniert ist, dann verwenden wir es normalerweise würde so geschrieben werden:

if(a === undefiniert){ dosomething..... }

Weil undefiniert in Javascript unzuverlässig ist
Zum Beispiel:
Wenn undefiniert in die Funktion eingefügt wird, behandeln wir es als lokale Variable, der ein Wert zugewiesen werden kann. Versuchen wir es als nächstes.

function foo2(){ var undefiniert=1; console.log(undefiniert) } foo2();

Aber wenn eine globale Variable innerhalb der Funktion definiert wird, Es ist nicht möglich, einen Wert zuzuweisen Versuchen Sie es stattdessen mit void 0 oder void (0):

Deklarieren Sie zuerst eine Variable a und weisen Sie sie undefiniert zu. Als nächstes verwenden wir void 0 zur Beurteilung.

var a=undefined; //Verwenden Sie void 0, um zu beurteilen, ob (a===void 0){ console.log('true') } // true //Verwenden Sie void (0) erneut. Beurteilen Sie, ob (a===void (0)){ console.log('true') } // true //Schließlich drucken wir die Rückgabewerte dieser beiden console.log(void 0,void (0)) // undefiniert undefiniert

Wir können jetzt undefiniert durch die Operation void 0 erhalten. Wenn wir dann beurteilen müssen, dass der Wert in Zukunft undefiniert ist, können wir direkt void 0 oder void (0) und diese verwenden zwei Der direkte Rückgabewert des Werts ist undefiniert und daher sehr zuverlässig!

4. Strings haben auch ein Längenattribut!
Wir wissen, dass alle Arrays ein Längenattribut haben. Auch wenn es sich um ein leeres Array handelt, ist die Länge 0. Gibt es also eine Zeichenfolge? Als nächstes überprüfen wir es.

var str="sdfsd5565s6dfsd65sd6+d5fd5"; console.log(str.length) // 26

Das Ergebnis ist da, also können wir nicht einfach den Typ beurteilen take Gibt es ein Längenattribut, um festzustellen, ob es sich um ein Array handelt? Wir können die folgende Methode verwenden, um festzustellen, ob es sich um ein Array handelt:

var obj=[1,2]; (obj) == = '[object Array]');

5. Wie erstelle ich ein zufälliges Array oder verschlüssele ein vorhandenes Array?

Manchmal benötigen wir ein zufällig gemischtes Array im Projekt, also implementieren wir Folgendes:

Erstellen Sie zuerst ein Array:

var arr=[]; for(var i= 0;iec18a6009035bd62964a6cf389ce83f9{ return Math.random() - 0.5 }) // [1, 0, 2, 3, 4 , 6, 8, 5, 7 , 9]

Die zweite Mischmethode:

arr.sort((a,b)=>{ return a>Math .random()*10; }) / / [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

Unsere vorherige normale Sortierung war so:

arr.sort(function (a,b){ return b-a });

Analyse:
Lassen Sie uns zunächst über die normale Sortierung sprechen:
a, b stellt zwei beliebige Elemente im Array dar, wenn return > ist vor a und nach b ; Wenn a = b ist, ist die Ausgabe von a-b von klein nach groß sortiert, die Ausgabe von b-a ist von groß nach klein sortiert.
Dann reden wir darüber, wie wir es stören:
Beim Erstellen eines Arrays besteht der nächste Schritt natürlich darin, die Sortiermethode von js zu verwenden, um es zu implementieren. Math.random() implementiert eine zufällige Dezimalzahl zwischen 0-. 1 und dann subtrahiert 0,5 , dann wird es nach dem nach dem Rückgabevergleich erhaltenen Wert sortiert, sodass eine nicht normale Sortierung von groß nach klein oder von klein nach groß erzeugt wird.

Die zweite Methode zum Verwürfeln besteht auch darin, der Sortiermethode zu folgen, a und b einzugeben und sie dann mit Zufallszahlen zu vergleichen. Die Vergleichsmethode ist nicht klar.

6. Entfernen Sie alle Leerzeichen davor, danach, davor und danach

Dies ist eine Reihe von Methoden, die speziell zum Entfernen von Leerzeichen geschrieben wurden. Sie eignen sich für verschiedene Situationen, einschließlich aller Leerzeichen, Leerzeichen davor und danach, Leerzeichen vorher und nachher.

var strr="    1 ad dertasdf sdfASDFDF DFG SDFG    "     //  type 1-所有空格，2-前后空格，3-前空格，4-后空格function trim(str,type){     switch (type){         case 1:return str.replace(/\s+/g,"");         case 2:return str.replace(/(^\s*)|(\s*$)/g, "");         case 3:return str.replace(/(^\s*)/g, "");         case 4:return str.replace(/(\s*$)/g, "");         default:return str;     } } console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"

Analyse:

Diese Methode verwendet ein reguläres Matching-Format. Ich werde das reguläre Matching-Format später trennen, um eine Serie zusammenzufassen, also bleiben Sie dran! ! !

s: Leerzeichen, Tab, Seitenvorschub, Zeilenumbruch S: Alle Inhalte außer s /g: Globale Übereinstimmung ^: Übereinstimmung am Zeilenanfang $: Übereinstimmung am Zeilenende + : Anzahl der Wiederholungen >0 * : Anzahl der Wiederholungen >=0 | : Oder

replace(a,b): Die Methode wird verwendet, um einige Zeichen durch andere Zeichen bei der Charaktererstellung zu ersetzen , und zwei Zeichen werden in Value übergeben, ersetzen Sie den Wert a vor dem Komma durch den Wert b nach dem Komma.

7. Groß-/Kleinschreibung umschalten (reguläre Übereinstimmung, Ersetzen)

Diese Methode wird hauptsächlich für einige Methoden bereitgestellt, die eine Groß-/Kleinschreibung erfordern, hauptsächlich einschließlich des ersten Buchstabens in Großbuchstaben, des ersten Buchstabens in Kleinbuchstaben, der Groß-/Kleinschreibung. all Wandelt alle in Großbuchstaben und alle in Kleinbuchstaben um.

Typ: 1: Anfangsbuchstabe groß geschrieben 2: Anfangsbuchstabe klein geschrieben 3: Groß-/Kleinschreibung umgewandelt 4: Alles in Großbuchstaben 5: Alles in Kleinbuchstaben

Originalzeichenfolge:

var str="sdfwwerasfddffddeerAasdgFegqer"; function changeCase(str,type) {    //这个函数是第三个大小写转换的方法     function ToggleCase(str) {         var itemText = ""         str.split("").forEach(                 function (item) {                  // 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次                     if (/^([a-z]+)/.test(item)) {                     //  如果是小写，转换成大写                         itemText += item.toUpperCase();                     }                 //  判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次                     else if (/^([A-Z]+)/.test(item)) {                    //   如果是大写，转换成小写                         itemText += item.toLowerCase();                     }                     else{                   //  如果都不符合，返回其本身                         itemText += item;                     }                 });         return itemText;     }   //下面主要根据传入的type值来匹配各个场景     switch (type) {          //当匹配         case 1:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                  //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toUpperCase() + v2.toLowerCase();             });         case 2:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                 //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toLowerCase() + v2.toUpperCase();             });         case 3:             return ToggleCase(str);         case 4:             return str.toUpperCase();         case 5:             return str.toLowerCase();         default:             return str;     } }  console.log(changeCase(str,1))   //SdfwwerasfddffddeerAasdgFegqer

Analyse:

split: wird verwendet, um eine Zeichenfolge in ein Zeichenfolgenarray aufzuteilen w: Zahlen 0-9 oder Buchstaben a-z und A-Z oder Unterstrich W: nicht w, außer den oben genannten Sonderzeichen usw . toUpperCase: In Großbuchstaben konvertieren toLowerCase: In Kleinbuchstaben konvertieren Ersetzen Der zweite Parameter kann eine Funktion sein,

Unter den Parametern der Funktion ist der erste derselbe, der zweite der reguläre übereinstimmende Inhalt und der Der dritte stimmt mit dem Rest überein.

Lassen Sie es uns durch ein kleines Experiment überprüfen:

Im Internet heißt es, dass Ersetzen 4 Parameter haben kann, aber ich habe die Bedeutung des vierten Vertreters nicht überprüft. Drei wurden verifiziert, der erste Parameter ist die Verifizierung selbst, der zweite Parameter ist das reguläre Übereinstimmungsergebnis und der dritte Parameter ist der verbleibende Wert nach der zweiten Übereinstimmung.

8. Schleife die eingehende Zeichenfolge n-mal

str ist die eingehende Zufallszeichenfolge und count ist die Anzahl der Schleifen

var str="abc";  var number=555; function repeatStr(str, count) {     //声明一个空字符串，用来保存生成后的新字符串     var text = &#39;&#39;;     //循环传入的count值，即循环的次数     for (var i = 0; i < count; i++) {        //循环一次就把字符串+到我们事先准备好的空字符串上         text += str;     }     return text; }   console.log(repeatStr(str, 3))         // "abcabcabc"   console.log(repeatStr(number, 3))      // "555555555"

Analyse: Entsprechend der Anzahl der Schleifen, Geben Sie in Kopieren innerhalb der Schleife den Wert nach +=

9 zurück. Ersetzen Sie den A-Inhalt der Suchzeichenfolge durch den B-Inhalt

let str="abacdasdfsd" function replaceAll(str,AFindText ,ARepText) { raRegExp = new RegExp(AFindText,"g"); return str.replace(raRegExp,ARepText); } console.log(replaceAll(str,"a","x")) // xbxcdxsdfsd

str: erforderlich Die bearbeitete Zeichenfolge selbst AFindText: der Inhalt, der ersetzt werden muss ARepText: der Inhalt, der ersetzt wird
Analyse: reguläre Ausdrücke erstellen, Inhalt abgleichen, ersetzen

10. Erkennen Sie gängige Formate , E-Mail, Mobiltelefonnummer, Name, Groß- und Kleinschreibung. Bei der

Formularüberprüfung müssen wir häufig einige Inhalte überprüfen. Hier sind einige gängige Verifizierungsbeispiele.

function checkType (str, type) {     switch (type) {         case 'email':             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);         case 'phone':             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);         case 'tel':             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);         case 'number':             return /^[0-9]$/.test(str);         case 'english':             return /^[a-zA-Z]+$/.test(str);         case 'chinese':             return /^[\u4E00-\u9FA5]+$/.test(str);         case 'lower':             return /^[a-z]+$/.test(str);         case 'upper':             return /^[A-Z]+$/.test(str);         default :             return true;     } } console.log(checkType ('hjkhjhT','lower'))   //false

Analyse:

checkType ('hjkhjhT', 'lower') 'Zu überprüfende Zeichenfolge', 'Übereinstimmendes Format' E-Mail: Bestätigungs-E-Mail-Telefon: Bestätigungs-Mobiltelefonnummer Tel.: Festnetznummer überprüfen: Nummern überprüfen Englisch: Englische Buchstaben überprüfen Chinesisch: Chinesische Schriftzeichen überprüfen Lower: Kleinbuchstaben überprüfen Großbuchstaben: Großbuchstaben überprüfen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle und mehr gelesen haben Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie die CSS-Kodierung

css3 click to Ripple-Spezialeffekt anzeigen

Wie man Leinwand verwendet, um die Interaktion zwischen dem Ball und der Maus zu realisieren

Das obige ist der detaillierte Inhalt vonGemeinsame Methoden der nativen JS-Organisation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!