Zusammenfassung der Tipps zum Reduzieren und Optimieren von Code in JavaScript

1) Verwenden Sie !!, um Variablen in den booleschen Typ umzuwandeln

Manchmal müssen wir überprüfen, ob einige Variablen vorhanden sind oder nicht, oder ob sie einen gültigen Wert haben, und so ihre behandeln Werte als wahr. Für eine solche Prüfung können Sie || (doppelter Negationsoperator) verwenden, der jede Art von Daten automatisch in einen booleschen Wert umwandelt: 0, null, „“, undefiniert oder NaN, alles andere gibt zurück WAHR. Schauen wir uns dieses einfache Beispiel an:

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

Wenn in diesem Beispiel der Wert von account.cash größer als Null ist, ist der Wert von account.hasMoney größer WAHR.

2) Verwenden Sie +, um die Variable in eine Zahl umzuwandeln

Diese Konvertierung ist supereinfach, funktioniert aber nur mit numerischen Zeichenfolgen, andernfalls wird NaN zurückgegeben (nicht). eine Zahl). Schauen Sie sich dieses Beispiel an:

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

Dieser Konvertierungsvorgang kann auch auf Datum angewendet werden. In diesem Fall wird ein Zeitstempel zurückgegeben:

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

3) Kurzschlusszustand

Wenn Sie Code wie diesen gesehen haben:

if (conected) { 
 login(); 
}

Dann können Sie && (AND-Operator) zwischen diesen beiden Variablen verwenden, um den Code zu verkürzen. Beispielsweise lässt sich der bisherige Code auf eine Zeile reduzieren:

conected && login();

Mit dieser Methode können Sie auch prüfen, ob bestimmte Eigenschaften oder Funktionen in einem Objekt vorhanden sind. Ähnlich dem folgenden Code:

user && user.login();

4) Verwenden Sie ||, um den Standardwert

festzulegen ES6 Standardparameter für diese Funktion. Um diese Funktionalität in älteren Browsern zu emulieren, können Sie || (ODER-Operator) verwenden und den Standardwert als zweites Argument übergeben. Wenn der erste Parameter „false“ zurückgibt, wird der zweite Parameter als Standardwert zurückgegeben. Schauen Sie sich dieses Beispiel an:

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

5) Array.length in einer Schleife zwischenspeichern

Dieser Trick ist sehr einfach und dadurch werden große Auswirkungen auf die Leistung beim Durchlaufen großer Arrays vermieden. Im Grunde verwendet fast jeder for eine Schleife über ein Array:

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

Wenn Sie ein kleineres Array verwenden, ist das in Ordnung, aber wenn Sie If verarbeiten Wenn das Array groß ist, berechnet dieser Code in jeder Schleife wiederholt die Größe des Arrays, was zu einer gewissen Verzögerung führt. Um dies zu vermeiden, können Sie array.length in einer Variablen zwischenspeichern, sodass der Cache jedes Mal in der Schleife anstelle von array.length verwendet wird:

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

für Mehr Kurz gesagt, Sie können so schreiben:

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

6) Erkennen Sie Attribute im Objekt

Wenn Sie eine Überprüfung durchführen müssen etwas Diese Technik ist nützlich, wenn Sie überprüfen, ob eine Eigenschaft vorhanden ist oder nicht, um die Ausführung undefinierter Funktionen oder Eigenschaften zu vermeiden. Sie können diese Technik auch verwenden, wenn Sie vorhaben, browserübergreifenden Code zu schreiben. Nehmen wir beispielsweise an, dass Sie Code schreiben müssen, der mit älteren Versionen von Internet Explorer 6 kompatibel ist, und Sie möchten document.querySelector() verwenden, um bestimmte Elemente anhand der ID abzurufen. In modernen Browsern ist diese Funktion jedoch nicht vorhanden. Um zu überprüfen, ob diese Funktion existiert, können Sie den in-Operator verwenden. Schauen Sie sich dieses Beispiel an:

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

Wenn in diesem Fall keine querySelector-Funktion im Dokument vorhanden ist, wird stattdessen document.getElementById() verwendet.

7) Holen Sie sich das letzte Element des Arrays

Array.prototype.slice(begin, end) kann zum Schneiden des Arrays verwendet werden. Wenn der Wert des Endparameters end jedoch nicht festgelegt ist, setzt die Funktion end automatisch auf den Array-Längenwert. Ich denke, nur wenige Leute wissen, dass diese Funktion negative Werte akzeptieren kann. Wenn Sie begin auf eine negative Zahl setzen, können Sie das reziproke Element aus dem Array erhalten:

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]

8) Array-Kürzung

Diese Technik kann die Größe des Arrays sperren, was sehr nützlich ist, wenn Sie eine feste Anzahl von Elementen im Array löschen möchten. Wenn Sie beispielsweise ein Array mit 10 Elementen haben, aber nur die ersten fünf Elemente erhalten möchten, können Sie das Array bereitstellen, indem Sie array.length = 5 festlegen. Schauen Sie sich dieses Beispiel an:

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]

9) Alle ersetzen

Die Funktion String.replace() ermöglicht die Verwendung von String und Regex Um einen String zu ersetzen, kann diese Funktion selbst nur den ersten passenden String ersetzen. Sie können jedoch /g am Ende des regulären Ausdrucks hinzufügen, 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"

10) Arrays zusammenführen

Wenn Sie zwei Arrays zusammenführen müssen, können Sie die Funktion Array.concat() verwenden:

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

Diese Funktion ist jedoch nicht geeignet für große Arrays, da dadurch ein neues Array erstellt und viel Speicher verbraucht wird. In diesem Fall können Sie Array.push.apply(arr1, arr2) verwenden, das kein neues Array erstellt, sondern das zweite Array mit dem ersten zusammenführt, um die Speichernutzung zu reduzieren:

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

11) Konvertieren Sie NodeList in ein Array

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

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

Das obige ist der detaillierte Inhalt vonZusammenfassung der Tipps zum Reduzieren und Optimieren von Code in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!