12 astuces JavaScript

Utilisez l'opérateur !! pour convertir une valeur booléenne

Parfois, nous devons vérifier si une variable existe ou vérifier si la valeur a une valeur valide, et renvoyer une valeur vraie si ça existe. Pour effectuer une telle vérification, nous pouvons utiliser l’opérateur !!, ce qui est très pratique et simple. Vous pouvez utiliser !!variable pour détecter les variables. Tant que la valeur de la variable est : 0, null, " ", undefined ou NaN, elle retournera false, sinon elle retournera 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, la valeur renvoyée par account.hasMoney est vraie.

Convertir une chaîne en nombre en utilisant

Cette astuce est très utile, elle est très simple et peut convertir des données de chaîne en nombre, mais elle ne convient qu'aux caractères Données de chaîne , 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 s'applique également à Date, dans ce cas, il renverra le numéro d'horodatage :

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

Conditionnelles 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 connecter des fonctions dans Together, comme le exemple ci-dessus, il peut être abrégé comme ceci :

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 l'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 argument. Si le premier paramètre renvoie faux, 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 array.length dans la boucle

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 de array.length un cache :

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 les objets

Cette petite astuce est utile lorsque vous devez vérifier si certaines propriétés existent 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, vous souhaitez utiliser document.querySelector() pour sélectionner un identifiant et le rendre compatible avec le navigateur IE6, mais cette fonction n'existe pas dans le navigateur IE6, il est donc difficile 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 querySelector n'existe pas sur le document, alors docuemnt.getElementById("id") sera appelée.

Obtenir le dernier élément du tableau

Array.prototype.slice(begin, end) est utilisé pour obtenir les éléments du tableau entre le début et la fin. Si vous ne définissez pas le paramètre de fin, la valeur de longueur par défaut du tableau sera utilisée comme valeur de fin. 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 début, vous pouvez alors obtenir le dernier élément du tableau. Par exemple :

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 utiles. Par exemple, si votre tableau contient 10 éléments, mais que vous souhaitez uniquement les cinq premiers éléments, vous pouvez tronquer le tableau de array.length=5. Comme l'exemple suivant :

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 String.replace() vous permet d'utiliser des chaînes ou des expressions régulières pour remplacer des chaînes This The. La fonction remplace uniquement la première occurrence de la chaîne, mais vous pouvez utiliser /g dans les expressions régulières pour simuler la fonction 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, vous utiliserez généralement la 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 n'est pas adaptée à la fusion de deux grands tableaux, car elle consommera beaucoup de mémoire pour stocker le tableau nouvellement créé. Dans ce cas, vous pouvez utiliser Array.pus().apply(arr1, arr2) à 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 :

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

Convertir NodeList en un tableau

Si vous exécutez la fonction document.querySelectorAll("p"), elle peut renvoyer un tableau d'éléments DOM, qui est un objet NodeList. Mais cet objet n'a pas les fonctions d'un tableau, comme sort(), réduire(), map(), filter(), etc. Pour que ces fonctions de tableau natives puissent être utilisées, la liste de nœuds doit être convertie en tableau. Vous pouvez utiliser [].slice.call(elements) pour réaliser :

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

Mélange des éléments du tableau

Pour le brassage des éléments du tableau, il n'est pas nécessaire à utiliser Pour toute bibliothèque externe, comme Lodash, faites simplement ceci :

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

Résumé

Vous avez maintenant appris quelques astuces JavaScript utiles. J'espère que ces conseils pourront vous aider à résoudre certains problèmes au travail ou que cet article vous a été utile. Si vous avez d'excellents conseils JavaScript, partagez-les avec nous dans les commentaires.