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

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

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

if (conected) {
    login();
}

verwenden, um sie mit Funktionen zu verbinden, wie im obigen Beispiel, kann abgekürzt werden als folgt: &&

conected && login();

user && user.login();

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

array.length

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

erstellen: array.length

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

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

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");
}

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]

-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]

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"

Funktion: Array.concat()

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

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中文网（m.sbmmt.com）！