Wir teilen die 12 praktischsten Fähigkeiten in JavaScript

In diesem Artikel werde ich 12 sehr nützliche JavaScript-Tipps vorstellen. Diese Tipps können Ihnen helfen, Ihren Code zu reduzieren und zu optimieren. Freunde in Not können sich auf diesen Artikel beziehen

In diesem Artikel werde ich 12 sehr nützliche JavaScript-Tipps teilen. Diese Tipps können Ihnen helfen, Ihren Code zu reduzieren und zu optimieren.

1) Verwenden Sie !!, um Variable in booleschen Typ zu konvertieren

Manchmal müssen wir überprüfen, ob einige Variablen vorhanden sind existieren oder wenn es einen gültigen Wert hat, sodass ihr Wert als wahr behandelt wird. Für eine solche Prüfung können Sie ||. (doppelter negativer -Operator ) verwenden, der jede Art von Daten automatisch in boolesche Werte umwandelt. Nur diese Variablen geben „false“ zurück: 0, null, „“ , undefiniert oder NaN, andere geben true zurück. 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 wahr.

2) Verwenden Sie +, um Variablen in Zahlen umzuwandeln

Diese Konvertierung ist supereinfach, funktioniert aber nur mit Zahlen Strings , sonst klappt es Gibt NaN (keine Zahl) zurück. 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 der Zeitstempel:

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

3) Kurzschlusszustand

Wenn Sie diese Art von Code gesehen haben:

if (conected) { 
 login(); 
}

Dann können Sie diese beiden Variablen verwenden Fügen Sie zwischen ihnen && (AND-Operator) ein, um den Code zu verkürzen. Beispielsweise kann der vorherige Code auf eine Zeile reduziert werden:

conected && login();

Mit dieser Methode können Sie auch prüfen, ob bestimmte -Eigenschaften oder im -Objekt vorhanden sind >Funktion. Ähnlich dem folgenden Code:

user && user.login();

4) Verwenden Sie ||, um Standardwerte festzulegen.

hat die Funktion von Standardparametern in ES6. 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) In loop cachearray.length

Dieser Trick ist sehr einfach und vermeidet einen großen Leistungseinbruch beim Durchlaufen großer Arrays. Im Grunde verwendet fast jeder for so, um ein Array zu durchlaufen:

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

Wenn Sie mit kleineren Arrays arbeiten, ist das in Ordnung, aber wenn Sie es mit großen Arrays zu tun haben Dann 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 Prägnanz können Sie schreiben:

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

6) Eigenschaften in Objekten erkennen

Dieser Trick ist sehr nützlich, wenn Sie überprüfen müssen, ob bestimmte Eigenschaften vorhanden sind, und vermeiden möchten, undefinierte Funktionen oder Eigenschaften auszuführen. Sie können diese Technik auch verwenden, wenn Sie vorhaben, browserübergreifenden Code zu schreiben. Nehmen wir beispielsweise an, Sie müssen Code schreiben, der mit älteren Versionen von Internet Explorer 6 kompatibel ist, und 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 Ausschneiden 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

这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含10个元素的数组，但是你只想获得前五个元素，则可以通过设置array.length = 5来阶段数组。看下这个例子：

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) 全部替换

String.replace()函数允许使用String和Regex来替换字符串，这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/g来模拟replaceAll()函数：

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

10) 合并数组

如果你需要合并两个数组，你可以使用Array.concat()函数：

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

但是，这个函数对于大数组来说不并合适，因为它将会创建一个新的数组并消耗大量的内存。在这种情况下，你可以使用Array.push.apply（arr1，arr2），它不会创建一个新数组，而是将第二个数组合并到第一个数组中，以减少内存使用：

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

11) 把NodeList转换成数组

如果运行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]

结论

现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍（四）

3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）

5. JavaScript运动框架之如何解决速度正负取整问题（一）

Das obige ist der detaillierte Inhalt vonWir teilen die 12 praktischsten Fähigkeiten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!