18 conseils d'optimisation JavaScript que vous devez connaître

Dans cet article, examinons 18 conseils d'optimisation JavaScript. Il convient à tous les développeurs qui utilisent la programmation JavaScript. Le but de cet article est de vous aider à mieux utiliser le langage JavaScript pour les travaux de développement. sera utile à tout le monde.

1. Jugement de plusieurs conditions

Lorsque nous devons juger plusieurs valeurs, nous pouvons utiliser la méthode include du tableau.

//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code... 
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}

2. Si vrai… else

L'opérateur ternaire est meilleur lorsque la condition if-else ne contient pas de logique plus large à l'intérieur.

// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;

Après avoir imbriqué les conditions, on conserve le contenu comme indiqué ci-dessous (trinité de points complexes) :

let x = 300,
let test2 = (x > 100) ? &#39;greater 100&#39; : (x < 50) ? &#39;less 50&#39; : &#39;between 50 and 100&#39;;
console.log(test2); // "greater than 100"

3 Null, Undefined, '' Null value check

Parfois il faut vérifier qu'on fait référence. à la valeur Que la variable ne soit pas nulle ou non définie ou '', nous pouvons utiliser l'écriture par court-circuit

// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';

4 Vérifier la valeur nulle et attribuer une valeur par défaut

Lorsque nous attribuons une valeur et constatons que la variable. est vide et doit attribuer une valeur par défaut, nous pouvons utiliser l'écriture de court-circuit suivante

let first = null,
let second = first || 'default'
console.log(second)

4 Opérateurs à double bit

Les opérateurs de bits sont les points de connaissances de base dans les didacticiels JavaScript pour débutants, mais nous ne le faisons pas. J'utilise pas souvent des opérateurs de bits. Parce que personne ne veut travailler avec des 1 et des 0 sans s'occuper du binaire.

Mais l'opérateur à double panneton a un étui très pratique. Vous pouvez utiliser des opérateurs double-bits au lieu de Math.floor( ). L'avantage de l'opérateur de position double négative est qu'il effectue la même opération plus rapidement

// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true

5. ES6 petites optimisations communes - propriétés de l'objet

const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }

6 ES6 petites optimisations communes - fonctions de flèche

//Bad
function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000)
list.forEach(function(item) {
  console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

.

7. Petite optimisation commune ES6 - valeur de retour implicite

La valeur de retour est le mot-clé que nous utilisons habituellement pour renvoyer le résultat final de la fonction. Une fonction fléchée avec une seule instruction peut renvoyer un résultat implicitement (la fonction doit omettre les parenthèses ({ }) afin d'omettre le mot-clé return).

Pour renvoyer des instructions multilignes (telles que le texte d'un objet), vous devez utiliser () au lieu de { } pour envelopper le corps de la fonction. Cela garantit que le code est évalué comme une seule instruction.

//Bad
function calcCircumference(diameter) {
  return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
  Math.PI * diameter
)

8. Petite optimisation commune ES6 - affectation de déstructuration

const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form

9. Petite optimisation commune ES6 - opérateur de propagation

La valeur de retour est le mot-clé que nous utilisons habituellement pour renvoyer le résultat final du fonction. Une fonction fléchée avec une seule instruction peut renvoyer un résultat implicitement (la fonction doit omettre les parenthèses ({ }) afin d'omettre le mot-clé return).

Pour renvoyer des instructions multilignes (telles que le texte d'un objet), vous devez utiliser () au lieu de { } pour envelopper le corps de la fonction. Cela garantit que le code est évalué comme une seule instruction.

const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]

10. Traitement des tableaux communs

Maîtrisez les méthodes courantes des tableaux et gardez-les à l'esprit lors de l'écriture Cela peut améliorer efficacement l'efficacité du codage. utilisé tous les jours

chaque carte de filtre pourEach find findIndex réduire inclut

const arr = [1,2,3]
//every 每一项都成立，才会返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一项都成了，就会返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 过滤器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一个新数组
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 没有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找对应值 找到就立马返回符合要求的新数组
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找对应值 找到就立马返回符合要求新数组的下标
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并数组
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并数组
console.log( arr.includes(1) ) //true
//数组去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//数组求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//对象解构 这种情况也可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    sort:1
}
//goods1
let reqParams={
    ...defaultParams,
    sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )

11 La comparaison renvoie

L'utilisation de la comparaison dans l'instruction return peut réduire le code de 5 lignes à 1 ligne.

// Bad
let test
const checkReturn = () => {
    if (test !== undefined) {
        return test;
    } else {
        return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}

12. Appel de fonction court

Nous pouvons utiliser l'opérateur ternaire pour implémenter ce type de fonction.

const test1 =() => {
  console.log('test1');
}
const test2 =() => {
  console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
  test1()
} else {
  test2()
}
// Good
test3 === 1? test1():test2()

13.Abréviation du bloc de code de commutation (bloc de code ifelse)

Nous pouvons enregistrer la condition dans l'objet clé-valeur, puis l'utiliser en fonction de la condition.

// Bad
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// Good
const data = {
  1: test1,
  2: test2,
  3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Good
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

14. Abréviation de chaîne multi-lignes

Lorsque nous traitons des chaînes multi-lignes dans le code, nous pouvons faire ceci :

// Bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// Good
const data = `abc abc abc abc abc abc
         test test,test test test test`

15. keys()

Object.entries() Cette fonctionnalité convertit un objet en un tableau d'objets.

Object.values() peut obtenir la valeur de l'objet

Object.keys() peut obtenir la valeur de la clé de l'objet

const data = { test1: 'abc', test2: 'cde' }
const arr1 = Object.entries(data)
const arr2 = Object.values(data)
const arr3 = Object.keys(data)
/** arr1 Output:
[ 
    [ 'test1', 'abc' ],
    [ 'test2', 'cde' ],
]
**/
/** arr2 Output:
['abc', 'cde']
**/
/** arr3 Output:
['test1', 'test2']
**/

16 Répétez une chaîne plusieurs fois

Afin de répéter les mêmes caractères plusieurs fois. , on peut utiliser une boucle for et les ajouter dans la même boucle, comment la raccourcir ?

//Bad 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += &#39;test,&#39;; 
} 
console.log(str);// test,test,test,test,test,
//good 
console.log(&#39;test,&#39;.repeat(5))

17. L'abréviation de puissance

La fonction puissance exponentielle mathématique est la suivante :

//Bad 
Math.pow(2,3)// 8
//good 
2**3 // 8

18. Séparateur de nombres

Vous pouvez maintenant facilement séparer les nombres en utilisant simplement _. Cela facilitera la gestion de grandes quantités de données.

//old syntax
let number = 98234567
//new syntax
let number = 98_234_567

Si vous souhaitez utiliser les dernières fonctionnalités de la dernière version de JavaScript (ES2021/ES12), veuillez vérifier les points suivants :

• 1.replaceAll() : renvoie une nouvelle chaîne dans laquelle tous les modèles correspondants sont remplacés par de nouveaux mots de remplacement. replaceAll()：返回一个新字符串，其中所有匹配的模式都被新的替换词替换。

• 2.Promise.any()：需要一个可迭代的Promise对象，当一个Promise完成时，返回一个带有值的Promise。

• 3.weakref：此对象持有对另一个对象的弱引用，不阻止该对象被垃圾收集。

• 4.FinalizationRegistry：让你在对象被垃圾回收时请求回调。

• 5.私有方法：方法和访问器的修饰符：私有方法可以用#声明。

• 6.逻辑运算符：&&和||运算符。

• 7.Intl.ListFormat：此对象启用对语言敏感的列表格式。

• 8.Intl.DateTimeFormat

2.Promise.any() : nécessite un objet Promise itérable lorsqu'une promesse est terminée, une promesse avec une valeur est renvoyée.

3. weakref : Cet objet contient une référence faible à un autre objet et n'empêche pas l'objet d'être récupéré. 🎜🎜🎜🎜4. FinalizationRegistry : Vous permet de demander un rappel lorsque l'objet est récupéré. 🎜🎜🎜🎜5. Méthodes privées : Modificateurs de méthodes et accesseurs : Les méthodes privées peuvent être déclarées avec #. 🎜🎜🎜🎜6. Opérateurs logiques : && et || 🎜🎜🎜🎜7.Intl.ListFormat : cet objet permet le formatage de liste sensible à la langue. 🎜🎜🎜🎜8.Intl.DateTimeFormat : cet objet permet le formatage de la date et de l'heure en fonction de la langue. 🎜🎜🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

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!