Maison > Article > interface Web > Exemples de code détaillés de 12 astuces JavaScript très pratiques
Dans cet article, je partagerai avec vous 12 conseils sur JavaScript. Ces conseils peuvent vous aider à résoudre certains problèmes dans votre travail réel.
!!
pour convertir les valeurs booléennes Parfois, nous devons vérifier si une variable existe ou vérifier si la valeur a une valeur valide, et renvoyer la valeur true
s'il existe. Pour effectuer une telle vérification, nous pouvons utiliser l'opérateur !!
, qui est très pratique et simple. Vous pouvez utiliser !!variable
pour détecter des variables. Tant que la valeur de la variable est : 0
, null
, " "
, undefined
ou NaN
, elle renverra false
, sinon elle le fera. reviens true
. Par exemple, l'exemple suivant :
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
Dans cet exemple, tant que la valeur de account.cash
est supérieure à 0
, alors la valeur renvoyée par account.hasMoney
est true
.
pour convertir des chaînes en nombres Cette technique est très utile et peut convertir des données de chaîne en nombres. Sinon NaN
sera renvoyé, comme dans l'exemple suivant :
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
Cela fonctionne également pour Date
, dans ce cas, il renverra le numéro d'horodatage :
console.log(+new Date()) // 1461288164385
Si vous avez un morceau de code comme celui-ci :
if (conected) { login(); }
Vous pouvez également abréger les variables et utiliser &&
pour les connecter à des fonctions, comme l'exemple ci-dessus, peut être abrégé comme suit :
conected && login();
Si certaines propriétés ou fonctions existent dans un objet, vous pouvez également faire cette détection, comme indiqué dans le code suivant :
user && user.login();
||
opérateur a la fonctionnalité de paramètres par défaut dans ES6. Pour émuler cette fonctionnalité dans les anciens navigateurs, utilisez l'opérateur ||
et transmettez la valeur par défaut comme deuxième paramètre. Si la valeur renvoyée par le premier paramètre est false
, alors la deuxième valeur sera considérée comme une valeur par défaut. Prenons l'exemple suivant :
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
Cette technique est très simple Lors du traitement d'une grande boucle de tableau, l'impact sur les performances sera très important. . En gros, tout le monde écrira un tableau qui synchronise les itérations comme ceci :
for(var i = 0; i < array.length; i++) { console.log(array[i]); }
S'il s'agit d'un petit tableau, c'est très bien. Si vous avez affaire à un grand tableau, ce code est utilisé à chaque fois. la taille du tableau sera recalculée à chaque itération, ce qui entraînera des retards. Afin d'éviter ce phénomène, vous pouvez faire un cache de array.length
:
var length = array.length; for(var i = 0; i < length; i++) { console.log(array[i]); }
Vous pouvez également l'écrire comme ceci :
for(var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
Cette petite astuce est utile lorsque vous devez détecter l'existence de certaines propriétés et éviter d'exécuter des fonctions ou des propriétés non définies. Vous souhaiterez peut-être également utiliser cette astuce si vous envisagez de personnaliser du code multi-navigateur. Par exemple, si vous souhaitez utiliser document.querySelector()
pour sélectionner un id
et le rendre compatible avec le navigateur IE6, mais que cette fonction n'existe pas dans le navigateur IE6, alors il serait gênant d'utiliser cet opérateur pour détecter si cette fonction existe . Très utile, comme dans l'exemple suivant :
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
Dans cet exemple, si la fonction document
n'existe pas, alors querySelector
sera appelée. docuemnt.getElementById("id")
est utilisé pour obtenir les éléments du tableau entre Array.prototype.slice(begin,end)
et begin
. Si vous ne définissez pas le paramètre end
, la valeur de longueur par défaut du tableau sera utilisée comme valeur end
. Mais certains étudiants ne savent peut-être pas que cette fonction peut également accepter des valeurs négatives comme paramètres. Si vous définissez une valeur négative comme valeur de end
, vous pouvez alors obtenir le dernier élément du tableau. Par exemple : 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]Troncation du tableauCette petite astuce sert principalement à verrouiller la taille du tableau. Elle est très utile si elle est utilisée pour supprimer certains éléments du tableau. Par exemple, votre tableau contient des éléments
, mais vous ne voulez que les cinq premiers éléments, vous pouvez alors tronquer le tableau via 10
. Comme l'exemple suivant : 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]Remplacer tout
La fonction vous permet d'utiliser des chaînes ou des expressions régulières pour remplacer des chaînes. Cette fonction elle-même ne remplace que la première occurrence. , mais vous pouvez utiliser String.replace()
dans les expressions régulières pour simuler la fonction /g
: replaceAll()
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"Fusionner les tableaux Si vous souhaitez fusionner deux tableaux, généralement ci-dessous, vous utiliserez le
fonction : Array.concat()
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];Ensuite, cette fonction ne convient pas pour fusionner deux grands tableaux, car elle consommera beaucoup de mémoire pour stocker le tableau nouvellement créé. Dans ce cas, vous pouvez utiliser
à la place pour créer un nouveau tableau. Cette méthode n'est pas utilisée pour créer un nouveau tableau, elle fusionne simplement le premier et le deuxième tableaux tout en réduisant l'utilisation de la mémoire : 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)!