Résumé des conseils pour réduire et optimiser le code en JavaScript

1) Utilisez !! pour convertir des variables en type booléen

Parfois, nous devons vérifier si certaines variables existent ou non, ou si elles ont une valeur valide, traitant ainsi leur valeurs comme vraies. Pour effectuer une telle vérification, vous pouvez utiliser || (opérateur de double négation), qui convertit automatiquement tout type de données en valeur booléenne. Seules ces variables renverront false : 0, null, "", non défini ou NaN, tout le reste renvoie. vrai. Jetons un coup d'œil à cet exemple simple :

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, si la valeur de account.cash est supérieure à zéro, la valeur de account.hasMoney est vrai.

2) Utilisez + pour convertir la variable en nombre

Cette conversion est super simple, mais elle ne fonctionne qu'avec des chaînes numériques, sinon elle renverra NaN (pas un numéro) . Jetez un œil à cet exemple :

function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN

Cette opération de conversion peut également être appliquée à Date, auquel cas elle renverra un horodatage :

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

3) Condition de court-circuit

Si vous avez vu un code comme celui-ci :

if (conected) { 
 login(); 
}

Ensuite, vous pouvez utiliser && (opérateur AND) entre ces deux variables pour raccourcir le code. Par exemple, le code précédent peut être réduit à une seule ligne :

conected && login();

Vous pouvez également utiliser cette méthode pour vérifier si certaines propriétés ou fonctions existent dans un objet. Similaire au code suivant :

user && user.login();

4) Utilisez || pour définir la valeur par défaut

dans ES6 Paramètres par défaut pour cette fonction. Pour émuler cette fonctionnalité dans les anciens navigateurs, vous pouvez utiliser || (opérateur OR) et transmettre la valeur par défaut comme deuxième argument. Si le premier paramètre renvoie false, le deuxième paramètre sera renvoyé comme valeur par défaut. Jetez un œil à cet exemple :

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

5) Mise en cache de array.length dans une boucle

Cette astuce est très simple et cela évite un impact énorme sur les performances lors du bouclage sur de grands tableaux. Fondamentalement, c'est ainsi que presque tout le monde utilise for pour boucler sur un tableau :

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

Si vous utilisez un tableau plus petit, c'est bien, mais si vous traitez Si le Le tableau est grand, ce code calculera à plusieurs reprises la taille du tableau dans chaque boucle, ce qui entraînera un certain retard. Pour éviter cela, vous pouvez mettre en cache array.length dans une variable afin que le cache soit utilisé à la place de array.length à chaque fois dans la boucle :

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

pour Plus de manière concise, vous pouvez écrire comme ceci :

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

6) Détecter les attributs dans l'objet

Quand vous devez vérifier quelque chose Cette technique est utile pour vérifier si une propriété existe ou non pour éviter d'exécuter des fonctions ou des propriétés non définies. Vous pouvez également utiliser cette technique si vous envisagez d'écrire du code multi-navigateur. Par exemple, supposons que vous deviez écrire du code compatible avec les anciennes versions d'Internet Explorer 6 et que vous souhaitiez utiliser document.querySelector() pour obtenir certains éléments par ID. Cependant, dans les navigateurs modernes, cette fonction n'existe pas. Donc, pour vérifier si cette fonction existe, vous pouvez utiliser l'opérateur in. Jetez un œil à cet exemple :

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
}

Dans ce cas, s'il n'y a pas de fonction querySelector dans le document, il utilisera document.getElementById() à la place.

7) Récupérer le dernier élément du tableau

Array.prototype.slice(begin, end) peut être utilisé pour couper le tableau. Mais si la valeur du paramètre end end n'est pas définie, la fonction définira automatiquement end sur la valeur de longueur du tableau. Je pense que peu de gens savent que cette fonction peut accepter des valeurs négatives. Si vous définissez start sur un nombre négatif, vous pouvez obtenir l'élément réciproque du tableau :

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]

. 8) Troncature du tableau

Cette technique permet de verrouiller la taille du tableau, ce qui est très utile lorsque l'on souhaite supprimer un nombre fixe d'éléments dans le tableau. Par exemple, si vous avez un tableau de 10 éléments, mais que vous souhaitez obtenir uniquement les cinq premiers éléments, vous pouvez organiser le tableau en définissant array.length = 5. Jetez un oeil à cet exemple :

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]

9) Remplacer tout

La fonction String.replace() permet de utilisation de String et Regex Pour remplacer une chaîne, cette fonction elle-même ne peut remplacer que la première chaîne correspondante. Mais vous pouvez ajouter /g à la fin de l'expression régulière 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"

10) Fusionner les tableaux

Si vous devez fusionner deux tableaux, vous pouvez utiliser 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];

Cependant, cette fonction ne convient pas grands tableaux , car cela créera un nouveau tableau et consommera beaucoup de mémoire. Dans ce cas, vous pouvez utiliser Array.push.apply(arr1, arr2) qui ne crée pas de nouveau tableau mais fusionne le deuxième tableau dans le premier pour réduire 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];

11) Convertir NodeList en un tableau

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!