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.

Utilisez l'opérateur !! 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.

Utilisez 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

Conditions de conjonction

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();

Utiliser le ||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

Cache dans la boucle 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]);
}

Détecter les attributs dans l'objet

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

Obtient le dernier élément du tableau.

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 tableau

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