Heim >Web-Frontend >js-Tutorial >Detaillierte Codebeispiele von 12 sehr praktischen JavaScript-Tipps
In diesem Artikel werde ich 12 Tipps zu JavaScript mit Ihnen teilen. Diese Tipps können Ihnen bei der Lösung einiger Probleme bei Ihrer tatsächlichen Arbeit helfen.
!!
-Operator, um einen booleschen Wert zu konvertieren. Manchmal müssen wir überprüfen, ob eine Variable vorhanden ist oder ob der Wert einen gültigen Wert hat, und den true
-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
, " "
, undefined
oder NaN
ist, wird false
zurückgegeben zurück true
. 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 true
.
+
, um Zeichenfolgen in Zahlen umzuwandeln Diese Technik ist sehr nützlich und sehr einfach. Sie kann Zeichenfolgendaten in Zahlen umwandeln, ist jedoch ansonsten nur für Zeichenfolgendaten geeignet > wird zurückgegeben, wie zum Beispiel das folgende Beispiel: NaN
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaNDies funktioniert auch für
, in diesem Fall wird die Zeitstempelnummer zurückgegeben: Date
console.log(+new Date()) // 1461288164385Konjunktionsbedingungen Wenn Sie einen Code wie diesen haben:
if (conected) { login(); }Sie können Variablen auch abkürzen und
verwenden, um sie mit Funktionen zu verbinden, wie im obigen Beispiel, kann abgekürzt werden als folgt: &&
conected && login();Wenn einige Eigenschaften oder Funktionen in einem Objekt vorhanden sind, können Sie diese Erkennung auch durchführen, wie im folgenden Code gezeigt:
user && user.login();Verwenden Sie den
||
und übergeben Sie den Standardwert als zweiten Parameter. Wenn der vom ersten Parameter zurückgegebene Wert ||
ist, wird der zweite Wert als Standardwert betrachtet. Nehmen Sie das folgende Beispiel: false
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); // 25Cache in der Schleife
array.length
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 einen Cache von
erstellen: array.length
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 im Objekt erkennen Dieser kleine Trick ist nützlich, wenn Sie die Existenz einiger Eigenschaften erkennen und die Ausführung undefinierter Funktionen oder Eigenschaften vermeiden müssen. Möglicherweise möchten Sie diesen Trick auch verwenden, wenn Sie vorhaben, browserübergreifenden Code anzupassen. Wenn Sie beispielsweise
verwenden möchten, um ein document.querySelector()
auszuwählen und es mit dem IE6-Browser kompatibel zu machen, diese Funktion jedoch im IE6-Browser nicht vorhanden ist, wäre es umständlich, diesen Operator zu verwenden, um festzustellen, ob diese Funktion vorhanden ist . Sehr nützlich, wie im folgenden Beispiel: id
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }Wenn in diesem Beispiel die Funktion
nicht in document
vorhanden ist, wird querySelector
aufgerufen. docuemnt.getElementById("id")
wird verwendet, um die Array-Elemente zwischen Array.prototype.slice(begin,end)
und begin
abzurufen. Wenn Sie den Parameter end
nicht festlegen, wird der Standardlängenwert des Arrays als end
-Wert verwendet. Einige Schüler wissen jedoch möglicherweise nicht, dass diese Funktion auch negative Werte als Parameter akzeptieren kann. Wenn Sie als Wert von end
einen negativen Wert festlegen, können Sie das letzte Element des Arrays erhalten. Zum Beispiel: begin
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-KürzungDieser kleine Trick wird hauptsächlich verwendet, um die Größe des Arrays zu sperren. Er ist sehr nützlich, wenn er zum Löschen einiger Elemente im Array verwendet wird. Wenn Ihr Array beispielsweise
-Elemente enthält, Sie aber nur die ersten fünf Elemente benötigen, können Sie das Array durch 10
kürzen. Wie das folgende Beispiel: 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]Alle ersetzen
Mit der Funktion können Sie Zeichenfolgen oder reguläre Ausdrücke verwenden, um Zeichenfolgen zu ersetzen , aber Sie können String.replace()
in regulären Ausdrücken verwenden, um die Funktion /g
zu simulieren: replaceAll()
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 Folgenden 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 zum Speichern des neu erstellten Arrays verbraucht. In diesem Fall können Sie stattdessen
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 die Speichernutzung: Array.pus().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];
NodeList
转换成数组如果你运行document.querySelectorAll(“p”)
函数时,它可能返回DOM元素的数组,也就是NodeList
对象。但这个对象不具有数组的函数功能,比如sort()
、reduce()
、map()
、filter()
等。为了让这些原生的数组函数功能也能用于其上面,需要将节点列表转换成数组。可以使用[].slice.call(elements)
来实现:
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
对于数组元素的洗牌,不需要使用任何外部的库,比如Lodash,只要这样做:
var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦,或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧,欢迎在评论中与我们一起分享。
以上就是关于12个非常实用的JavaScript小技巧的代码实例详解的内容,更多相关内容请关注PHP中文网(www.php.cn)!