Résumé de l'amélioration de l'efficacité de l'exécution de JS-js tutoriel-php.cn

Cette fois, je vais vous apporter un résumé de l'amélioration de l'efficacité de l'exécution de JS et quelles sont les précautions pour améliorer l'efficacité de l'exécution de JS. Voici des cas pratiques, jetons un coup d'oeil.

1. Utilisez des symboles logiques && ou || pour faire des jugements conditionnels

var foo = 10; 
foo == 10 && doSomething(); // 如果 foo == 10 则执行 doSomething(); 
foo == 5 || doSomething(); // 如果 foo != 5 则执行doSomething();

Copier après la connexion

"||" Valeur par défaut du paramètre de fonction

Function doSomething(arg1){ 
 Arg1 = arg1 || 10; // 如果 arg1为设置那么 Arg1=10
}

Copier après la connexion

2 Utilisez la méthode map() pour parcourir le tableau .

var squares = [1,2,3,4].map(function (val) { 
 return val * val; 
}); 
// 运行结果为 [1, 4, 9, 16]

Copier après la connexion

3. Arrondi aux décimales

var num =2.443242342; 
num = num.toFixed(4); // 保留四位小数位 2.4432

Copier après la connexion

0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // = 9007199254740992 
9007199254740992 + 2 // = 9007199254740994

Copier après la connexion

0,1+0,2 est égal à 0,30000000000000004. Pourquoi cela se produit-il ? Selon la norme IEEE754, tout ce que vous devez savoir est que tous les nombres JavaScript sont représentés sous forme de nombres à virgule flottante en binaire 64 bits. Les développeurs peuvent utiliser les méthodes toFixed() et toPrecision() pour résoudre ce problème.

5. Utilisez la boucle for-in pour vérifier les propriétés de l'objet traversé

Le code suivant sert principalement à éviter de traverser les propriétés de l'objet.

for (var name in object) { 
 if (object.hasOwnProperty(name)) { 
  // 执行代码
 } 
}

Copier après la connexion

6. Opérateur virgule

var a = 0; 
var b = ( a++, 99 ); 
console.log(a); // a 为 1 
console.log(b); // b 为 99

Copier après la connexion

7. Lors de l'utilisation des sélecteurs jQuery, les développeurs peuvent mettre en cache les éléments DOM

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');

Copier après la connexion

8 Transmettez les paramètres à isFinite() Validez avant

isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10); // true 
isFinite(undifined); // false 
isFinite(); // false 
isFinite(null); // true !!!

Copier après la connexion

9. Évitez l'indexation négative dans les tableaux

Assurez-vous que les paramètres transmis à la méthode indexOf() ne sont pas négatif.

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ; // from is equal to -1 
numbersArray.splice(from,2); // will return [5]

Copier après la connexion

10. Sérialisation et désérialisation (à l'aide de JSON)

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ 
var personFromString = JSON.parse(stringFromPerson); 
/* personFromString is equal to person object */

Copier après la connexion

11. Le constructeur de fonction

eval() et le constructeur de fonction sont appelés moteurs de script à chaque fois qu'ils sont exécutés, le code source doit être converti en code exécutable.

var func1 = new Function(functionCode); 
var func2 = eval(functionCode);

Copier après la connexion

12. Évitez d'utiliser la méthode with()

Si vous utilisez with() pour insérer des variables dans la zone globale, puis, une fois qu'une variable porte le même nom, il est facile de la confondre et de la remplacer.

13. Évitez d'utiliser une boucle for-in dans un tableau

utilisez-la plutôt comme ceci :

comme ceci serait mieux :

var sum = 0; 
for (var i in arrayNumbers) { 
 sum += arrayNumbers[i]; 
}

Copier après la connexion

Parce que i et len sont les premières instructions de la boucle, elles seront exécutées une fois pour chaque instanciation, donc l'exécution sera plus rapide que la suivante :

var sum = 0; 
for (var i = 0, len = arrayNumbers.length; i < len; i++) { 
 sum += arrayNumbers[i]; 
}

Copier après la connexion

Pourquoi ? La longueur du tableau, arrayynNumbers, est recalculée à chaque itération de boucle.

for (var i = 0; i < arrayNumbers.length; i++)

Copier après la connexion

14. Ne transmettez pas de chaînes aux méthodes setTimeout() et setInterval()

Si vous transmettez des chaînes à ces deux méthodes, alors la chaîne sera recalculée comme eval, ce qui sera plus lent Au lieu de l'utiliser comme ceci :

Au lieu de cela, elle devrait être utilisée comme ceci :

setInterval(&#39;doSomethingPeriodically()&#39;, 1000); 
setTimeOut(&#39;doSomethingAfterFiveSeconds()&#39;, 5000);

Copier après la connexion

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

Copier après la connexion

15. Utilisez des instructions switch/case au lieu d'instructions if/else plus longues

S'il y a plus de 2 cas, alors l'utilisation de switch/case sera beaucoup plus rapide, et le code semble plus élégant.

16. Lorsque vous rencontrez une plage numérique, vous pouvez utiliser switch/casne

function getCategory(age) { 
 var category = ""; 
 switch (true) { 
  case isNaN(age): 
   category = "not an age"; 
   break; 
  case (age >= 50): 
   category = "Old"; 
   break; 
  case (age <= 20): 
   category = "Baby"; 
   break; 
  default: 
   category = "Young"; 
   break; 
 }; 
 return category; 
} 
getCategory(5); // 返回 "Baby"

Copier après la connexion

17.

Créer un objet dont les propriétés sont un objet donné Vous pouvez écrire une fonction comme celle-ci pour créer un objet dont les propriétés sont un objet donné, comme ceci :

function clone(object) { 
 function OneShotConstructor(){}; 
 OneShotConstructor.prototype= object; 
 return new OneShotConstructor(); 
} 
clone(Array).prototype ; // []

Copier après la connexion

18. Une fonction d'échappement HTML

function escapeHTML(text) { 
 var replacements= {"<": "<", ">": ">","&": "&", "\"": """};      
 return text.replace(/[<>&"]/g, function(character) { 
  return replacements[character]; 
 }); 
}

Copier après la connexion

19. Dans un éviter d'utiliser try-catch-finally

en boucle

try-catch-finally在当前范围里运行时会创建一个新的变量，在执行catch时，捕获异常对象会赋值给变量。
不要这样使用：