Maison > interface Web > js tutoriel > le corps du texte

4 conseils pour rédiger du code JS court et concis (Partager)

青灯夜游
Libérer: 2021-10-28 10:13:29
avant
1958 Les gens l'ont consulté

Comment rendre le code JS plus court ? L'article suivant partagera avec vous 4 conseils pour rédiger du code JS court et concis. J'espère que cela vous sera utile !

4 conseils pour rédiger du code JS court et concis (Partager)

Court-circuit

Les opérateurs logiques et (&&) en Javascript peuvent provoquer un court-circuit, par exemple 与(&&)可以产生短路,例如

console.log(true && 0 && 2); // 0
console.log(true && 'test' && 2) // 2
Copier après la connexion

即代码从左往右,如果遇到undefinednull0等等会被转化为false的值时就不再继续运行。

x == 0 && foo()
// 等价于
if( x == 0 ){
  foo()
}
Copier après la connexion

链判断运算符 '?'

假设有一个对象

const student = {
    name : {
      firstName : 'Joe'
  }
}
Copier après la connexion

我们希望firstname存在的情况下做一些事情, 我们不得不一层一层检查

if(student && student.name && student.name.firstName){
    console.log('student First name exists')
}
Copier après la connexion

采用链判断运算符会在某一层取不到值的时候停止并返回undefined

if(student?.name?.firstName){
    console.log('student First name exists')
}
Copier après la connexion

空值合并运算符 '??'

我们有时候会使用三元运算来简化if...else... 或者返回一个默认值

const foo = () => {
    return student.name?.firstName 
        ? student.name.firstName 
        : 'firstName do not exist'
}
console.log(foo())
Copier après la connexion

这种情况,我们可以通过空值合并进一步简化代码

const foo = () => {
    return student.name?.firstName ?? 'firstName do not exist'
}
console.log(foo())
Copier après la connexion

很像或||运算符,但??只对undefinednull

const foo = () => {
    if(x<1) {
      return &#39;x is less than 1&#39;
    } else {
      if(x > 1){
          return &#39;x is greater than 1&#39;
      } else {
          return &#39;x is equal to 1&#39;
      }
  }
}
Copier après la connexion

C'est-à-dire que le code va de gauche à droite, si vous rencontrez undefined< /code>, <code>null, 0, etc. seront convertis en valeurs de false et ne le seront pas continuer à courir.

const foo = () => {
    if(x<1){
        return &#39;less than 1&#39;
    }
    if(x>1){
        return &#39;x is greater than 1&#39;
    }
    return &#39;x is equal to 1&#39;
}
Copier après la connexion

Opérateur de jugement en chaîne '?'

Supposons qu'il y ait un objet

rrreee

Nous voulons faire quelque chose si le prénom existe, nous devons y aller couche par couche Vérifiez

rrreee
L'opérateur de jugement de chaîne s'arrêtera et retournera undéfini lorsqu'une valeur ne peut pas être obtenue à une certaine couche

rrreee

Opérateur de fusion de valeurs nulles '??'

Nous utilisons parfois opérations ternaires pour simplifier if...else... ou renvoyer une valeur par défautrrreee

Dans ce cas, nous pouvons simplifier davantage le code grâce à la fusion de valeurs nulles🎜rrreee🎜 Un peu comme le ou ||, mais ?? ne fonctionne que sur undefined et null, ce qui peut éviter les valeurs. C'est 0 problème🎜🎜🎜 Essayez d'éviter l'imbrication if else🎜🎜🎜Par exemple🎜rrreee🎜Vous pouvez rendre l'imbrication if else moins compliquée en supprimant la condition else, car l'instruction return arrêtera l'exécution du code et renverra la fonction🎜rrreee🎜🎜Bon Le code ne fonctionne pas doit être aussi court que possible. Parfois, un code trop rationalisé rendra le processus de débogage plus difficile, la lisibilité est donc la plus importante, en particulier dans le cas d'une collaboration à plusieurs personnes. 🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!