Sechs merkwürdige und nützliche Dinge über JavaScript

Heute werde ich Ihnen einige wenig bekannte Fakten über JavaScript verraten. Sie haben vielleicht schon davon gehört, aber sie könnten Sie auch überraschen. Lassen Sie uns ohne weitere Umschweife einen Blick darauf werfen!

1. Dekonstruktionstipps

Normalerweise müssen wir einige Eigenschaften eines mehrschichtig verschachtelten Objekts verwenden, und wir werden es dekonstruieren und verwenden

lass obj = {
  Teil1: {
    Name: 'Null Eins',
    Alter: 23
  }
}

// dekonstruieren const { part1: { name, age } } = obj
// Verwenden Sie console.log(Name, Alter) // 0123

In diesem Fall können Sie nach der Dekonstruktion von Name und Alter aus Teil1 die Attribute von Teil1 nicht in der Variablen Objekt verwenden, beispielsweise:

// .... ausgelassen const { part1: { name, age } } = obj
console.log(part1) // Nicht abgefangener Referenzfehler: part1 ist nicht definiert

Tatsächlich können Sie die Destrukturierung mehrfach durchführen, beispielsweise:

// .... ausgelassen const { part1: { name, age }, part1 } = obj
console.log(Teil 1) // {Name: "零一", Alter: 23}

2. Digitaler Separator

Manchmal definiert man eine numerische Konstante in einer Datei

const meinGeld = 1000000000000

Es gibt so viele 0en, 1en, 2en, 6en, 7en... Mir wird schwindlig, wenn ich sie alle zähle. Was soll ich tun?

Räumen Sie die Zahlentrennzeichen auf!

const meinGeld = 1_000_000_000_000

console.log(meinGeld) // 1000000000000

Es ist kein Problem, es auf diese Weise zu schreiben, und es ist intuitiver, nachdem die Zahlen getrennt wurden! !

3. Wer ist besser im Versuchen...Fangen...Endlich?

Bei einem normalen Funktionsaufruf beendet return die Ausführung der Funktion im Allgemeinen vorzeitig.

Funktion demo () {
  Rückgabe 1
  console.log('Ich bin null eins')
  Rückgabe 2
}

konsole.log(demo()) // 1

Bei try...catch...finally wird die Ausführung durch return nicht vorzeitig beendet.

Funktion demo () {
  versuchen {
    Rückgabe 1
  } fangen (Fehler) {
    console.log(fehler)
    Rückgabe 2
  Endlich
    Rückgabe 3
  }
}

console.log(demo()) // Was wird zurückgegeben? ?

Was wird dieses Programm zurückgeben? Denken Sie darüber nach

Zwei Stunden später~

Die Antwort ist: 3

Schließlich kam ich zu dem Schluss, dass „endlich“ wirkungsvoller ist.

Dann können wir ein paar Tricks machen

Funktion demo () {
  versuchen {
    Rückgabe 1
  } fangen (Fehler) {
    console.log(fehler)
    Rückgabe 2
  Endlich
    versuchen {
      Rückgabe 3
    Endlich
      Rückgabe 4
    }
  }
}

console.log(demo()) // gibt 4 zurück

4. Holen Sie sich den aktuellen Aufrufstapel

Funktion ersteFunktion() { zweiteFunktion(); } 
Funktion zweiteFunktion() { dritteFunktion(); } 
Funktion dritteFunktion() { console.log(neuer Fehler().stack); }

ersteFunktion();

//=> Fehler 
// bei dritter Funktion (<anonym>:2:17) 
// bei zweiterFunktion (<anonymous>:5:5) 
// bei firstFunction (<anonymous>:8:5) 
// um <anonym>:10:1

new Error().stack Auf diese Weise können Sie jederzeit die Aufrufstapelinformationen der aktuellen Codeausführung abrufen. Dies ist auch eine Möglichkeit zum Debuggen des Codes

5. Generieren Sie eine zufällige Zeichenfolge mit einer Codezeile

Als ich zum ersten Mal JS lernte, wollte ich eine Funktion implementieren, die einen zufälligen String generiert. So habe ich es gemacht.

Funktion Hash () {
  lass s = ''
  const strs = [
    'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 
    'h', 'i', 'j', 'k', 'l', 'm', 'n', 
    'o', 'p', 'q', 'r', 's', 't', 'u', 
    'v', 'w', 'x', 'y', 'z', '0', '1', 
    '2', '3', '4', '5', '6', '7', '8',
    '9',
  ]
  für(lass i = 0; i < 10; i++) {
    s += strs[Math.floor(Math.random() * strs.Länge)]
  }
  Rücksendungen
}

hash() // 'www7v2if9r'

Was für ein Aufwand! Es hat lange gedauert, die 26 Buchstaben und 10 Zahlen zu schreiben (natürlich können Sie auch den ASCII-Code verwenden, das ist bequemer)

Als Nächstes stellen wir eine Methode vor, mit der die Funktion „zufällige Generierung einer Zeichenfolge“ mit nur einer Zeile superkurzen Codes erreicht werden kann.

const str = Math.random().toString(36).substr(2, 10);
console.log(str); // 'w5jetivt7e'

Wir haben auch eine 10-stellige Zufallszeichenfolge bekommen, die ziemlich cool ist 😎, im Vergleich zu der, die ich geschrieben habe, ist sie so cool

Zuerst generiert Math.random() eine Zahl in [0, 1), also 0,123312, 0,982931 usw. Rufen Sie dann die toString-Methode der Zahl auf, um sie in die Basis 36 umzuwandeln. Laut MDN sollte die Konvertierung in die Basis 36 die Buchstaben a bis z und die Zahlen 0 bis 9 enthalten. Da die generierte Zahl 0,89kjna21sa oder so ähnlich ist, müssen wir den Dezimalteil abschneiden, d. h. 10 Zeichen vom Index 2 abschneiden, um die gewünschte Zufallszeichenfolge zu erhalten.

Viele Open-Source-Bibliotheken verwenden diesen Ansatz, um zufällige IDs für DOM-Elemente zu erstellen.

6. Der schnellste Weg zum DOM

Elemente mit einem ID-Attribut in HTML werden durch die gleichnamige globale ID-Variable referenziert

<div id="zero2one"></div>

Ursprünglich wurde der DOM wie folgt erhalten

const el = document.getElementById('zero2one')  
console.log(el) // <div id="zero2one"></div>

Jetzt können Sie dies tun

console.log(zero2one) // <div id="zero2one"></div>

Ist das nicht praktisch? ^-^

Zusammenfassen

Dies ist das Ende dieses Artikels über sechs seltsame, aber praktische JavaScript-Techniken. Weitere relevante praktische JavaScript-Techniken finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!