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.

Verwenden Sie den !!-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.

Verwenden Sie +, 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")); // NaN

Dies funktioniert auch für

, in diesem Fall wird die Zeitstempelnummer zurückgegeben: Date

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

Konjunktionsbedingungen

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

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 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); // 25

Cache in der Schleife

array.length

Bei der Verarbeitung einer großen Array-Schleife sind die Auswirkungen 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 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")

Letztes Element im Array abrufen

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ürzung

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 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）！