12 JavaScript-Tipps

Verwenden Sie den !!-Operator, um einen booleschen Wert zu konvertieren

Manchmal müssen wir prüfen, ob eine Variable existiert oder ob der Wert einen gültigen Wert hat, und einen wahren Wert zurückgeben, wenn es existiert. Um eine solche Überprüfung durchzuführen, können wir den !!-Operator verwenden, was sehr praktisch und einfach ist. Sie können !!variable verwenden, um Variablen zu erkennen. Solange der Wert der Variablen 0, null, „ “, undefiniert oder NaN ist, wird „false“ zurückgegeben, andernfalls wird „true“ zurückgegeben. Zum Beispiel das folgende Beispiel:

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

Solange in diesem Beispiel der Wert von account.cash größer als 0 ist, ist der von account.hasMoney zurückgegebene Wert wahr.

Verwenden Sie +, um Zeichenfolgen in Zahlen umzuwandeln

Dieser Trick ist sehr nützlich, er ist sehr einfach, er kann Zeichenfolgendaten in Zahlen umwandeln, ist aber nur für geeignet String-Daten, andernfalls wird NaN zurückgegeben, wie im folgenden Beispiel:

function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

Dies gilt auch für Datum, in diesem Fall wird die Zeitstempelnummer zurückgegeben:

console.log(+new Date()) // 1461288164385

und Bedingungen

Wenn Sie einen Code wie diesen haben:

if (conected) {
    login();
}

Sie können Variablen auch abkürzen und && verwenden, um Funktionen miteinander zu verbinden, z Im obigen Beispiel kann es wie folgt abgekürzt werden:

conected && login();

Sie können auch erkennen, ob einige Eigenschaften oder Funktionen in einem Objekt vorhanden sind, wie im folgenden Code gezeigt:

user && user.login();

Verwenden Sie den ||.-Operator

verfügt über die Funktion von Standardparametern in ES6. Um diese Funktion in älteren Browsern zu emulieren, verwenden Sie den Operator || und übergeben Sie den Standardwert als zweiten Parameter. Wenn der erste Parameter „false“ zurückgibt, wird der zweite Wert als Standardwert betrachtet. Nehmen Sie das folgende Beispiel:

function User(name, age) {
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

Array.length in der Schleife zwischenspeichern

Diese Technik ist sehr einfach, aber bei der Verarbeitung einer großen Array-Schleife sind die Auswirkungen auf die Leistung sehr groß . Grundsätzlich schreibt jeder ein Array, das die Iteration wie folgt synchronisiert:

for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Wenn es sich um ein kleines Array handelt, ist dies in Ordnung. Wenn Sie es mit einem großen Array zu tun haben, wird dieser Code jedes Mal verwendet Die Größe des Arrays wird bei jeder Iteration neu berechnet, was zu einigen Verzögerungen führt. Um dieses Phänomen zu vermeiden, können Sie array.length zu einem Cache machen:

var length = array.length;
for(var i = 0; i < length; i++) {
    console.log(array[i]);
}

Sie können es auch so schreiben:

for(var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

Attribute in Objekten erkennen

Dieser kleine Trick ist nützlich, wenn Sie überprüfen müssen, ob einige Eigenschaften vorhanden sind, und vermeiden möchten, undefinierte Funktionen oder Eigenschaften auszuführen. Möglicherweise möchten Sie diesen Trick auch verwenden, wenn Sie vorhaben, browserübergreifenden Code anzupassen. Sie möchten beispielsweise document.querySelector() verwenden, um eine ID auszuwählen und sie mit dem IE6-Browser kompatibel zu machen, aber diese Funktion ist im IE6-Browser nicht vorhanden, sodass es schwierig ist, mit diesem Operator zu erkennen, ob diese Funktion vorhanden ist . Sehr nützlich, wie im folgenden Beispiel:

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

Wenn in diesem Beispiel die querySelector-Funktion im Dokument nicht vorhanden ist, wird docuemnt.getElementById("id") aufgerufen.

Letztes Element im Array abrufen

Array.prototype.slice(begin, end) wird verwendet, um die Array-Elemente zwischen Anfang und Ende abzurufen. Wenn Sie den Endparameter nicht festlegen, wird der Standardlängenwert des Arrays als Endwert verwendet. Einige Schüler wissen jedoch möglicherweise nicht, dass diese Funktion auch negative Werte als Parameter akzeptieren kann. Wenn Sie als Anfangswert einen negativen Wert festlegen, können Sie das letzte Element des Arrays abrufen. Zum Beispiel:

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

Array-Trunkierung

Dieser kleine Trick wird hauptsächlich verwendet, um die Größe des Arrays zu sperren. Er ist sehr nützlich, wenn er zum Löschen verwendet wird einige Elemente im Array. Wenn Ihr Array beispielsweise 10 Elemente hat, Sie aber nur die ersten fünf Elemente benötigen, können Sie das Array um array.length=5 kürzen. Wie das folgende Beispiel:

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

Alle ersetzen

Mit der Funktion String.replace() können Sie Zeichenfolgen oder reguläre Ausdrücke verwenden, um Zeichenfolgen zu ersetzen Die Funktion ersetzt nur das erste Vorkommen der Zeichenfolge, aber Sie können /g in regulären Ausdrücken verwenden, um die Funktion replaceAll() zu simulieren:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

Arrays zusammenführen

Wenn Sie zwei Arrays zusammenführen möchten, verwenden Sie im Allgemeinen die Funktion Array.concat():

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

Dann ist diese Funktion nicht zum Zusammenführen zweier großer Arrays geeignet, da sie viel Speicher verbraucht Speichern Sie das neu erstellte Array. In diesem Fall können Sie stattdessen Array.pus().apply(arr1, arr2) verwenden, um ein neues Array zu erstellen. Diese Methode wird nicht zum Erstellen eines neuen Arrays verwendet, sondern führt lediglich das erste und das zweite Array zusammen und reduziert gleichzeitig den Speicherverbrauch:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

NodeList in ein Array konvertieren

Wenn Sie die Funktion document.querySelectorAll("p") ausführen, gibt sie möglicherweise ein Array von DOM-Elementen zurück, bei dem es sich um ein NodeList-Objekt handelt. Dieses Objekt verfügt jedoch nicht über die Funktionen eines Arrays wie sort(), Reduce(), Map(), Filter() usw. Damit diese nativen Array-Funktionen darauf verwendet werden können, muss die Knotenliste in ein Array konvertiert werden. Sie können [].slice.call(elements) verwenden, um Folgendes zu erreichen:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

Mischen von Array-Elementen

Für das Mischen von Array-Elementen besteht keine Notwendigkeit Für jede externe Bibliothek wie Lodash gehen Sie einfach wie folgt vor:

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

Zusammenfassung

Jetzt haben Sie einige nützliche JavaScript-Tricks gelernt. Ich hoffe, dass diese Tipps Ihnen bei der Lösung einiger Probleme bei der Arbeit helfen können oder dass dieser Artikel für Sie hilfreich war. Wenn Sie tolle JavaScript-Tipps haben, teilen Sie uns diese bitte in den Kommentaren mit.