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")); // 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();
||
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中文网(www.php.cn)!