12 wichtige 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.

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Verwenden Sie den !!-Operator, um boolesche Werte zu konvertieren

Manchmal brauchen wir Überprüft, ob eine Variable vorhanden ist oder ob der Wert einen gültigen Wert hat, und gibt den true-Wert zurück, wenn er vorhanden ist. 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

In diesem Beispiel ist der von account.cash zurückgegebene Wert 0, solange der Wert von account.hasMoney größer als true ist.

Verwenden Sie +, um Zeichenfolgen in Zahlen umzuwandeln

Diese Technik ist sehr nützlich und sehr einfach. Sie kann Zeichenfolgendaten in Zahlen umwandeln, ist jedoch nur für Zeichenfolgendaten geeignet 🎜> wird zurückgegeben, wie im folgenden Beispiel: NaN

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

Dies gilt auch für

, in diesem Fall werden die Zeitstempelnummer: Date

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

und die Bedingungssymbole <🎜 zurückgegeben >

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. Im obigen Beispiel kann es beispielsweise wie folgt abgekürzt werden Dies:

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

||Dort ist eine Funktion der Standardparameter 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: ||

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

falseCache in der Schleife

array.length Diese Technik ist sehr einfach, aber bei der Verarbeitung einer großen Array-Schleife ist die Auswirkung auf die Leistung sehr groß. Grundsätzlich schreibt jeder ein Array, das wie folgt synchron iteriert:

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 bei jeder Iteration iterieren Die Größe wird vollständig neu berechnet, was zu Verzögerungen führen kann. Um dieses Phänomen zu vermeiden, können Sie einen Cache von

erstellen:

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

array.length Sie können es auch so schreiben:

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

Erkennen Sie die Attribute im Objekt

bei Bedarf Dieser kleine Trick ist nützlich, wenn Sie die Existenz einiger Eigenschaften überprüfen, um die Ausführung undefinierter Funktionen oder Eigenschaften zu vermeiden. Möglicherweise möchten Sie diesen Trick auch verwenden, wenn Sie vorhaben, browserübergreifenden Code anzupassen. Wenn Sie beispielsweise

verwenden möchten, um ein

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: document.querySelector()

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

id Wenn in diesem Beispiel die Funktion

nicht vorhanden ist, wird

aufgerufen. documentquerySelector Ruft das letzte Element im Array ab. docuemnt.getElementById("id")

wird verwendet, um die Array-Elemente zwischen

und

abzurufen. Wenn Sie den Parameter Array.prototype.slice(begin,end) nicht festlegen, wird der Standardlängenwert des Arrays als begin-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: end

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]

endArray-Trunkierungbegin

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

kürzen. Wie das folgende Beispiel: Mit der Funktion

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]

10Alle ersetzenarray.length=5

können Sie Zeichenfolgen oder reguläre Ausdrücke verwenden, um Zeichenfolgen zu ersetzen. Sie können jedoch

in regulären Ausdrücken verwenden, um die Funktion

zu simulieren: String.replace()

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

/gArrays zusammenführenreplaceAll()

Wenn Sie zwei Arrays zusammenführen möchten, verwenden Sie unter normalen Umständen die Funktion

Funktion:

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

然后这个函数并不适合用来合并两个大型的数组，因为其将消耗大量的内存来存储新创建的数组。在这种情况之个，可以使用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小技巧，欢迎在评论中与我们一起分享。

Das obige ist der detaillierte Inhalt von12 wichtige JavaScript-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!