Maison  >  Article  >  interface Web  >  4 conseils pour rédiger du code JS court et concis (Partager)

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

青灯夜游
青灯夜游avant
2021-10-28 10:13:291964parcourir

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

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

x == 0 && foo()
// 等价于
if( x == 0 ){
  foo()
}

链判断运算符 '?'

假设有一个对象

const student = {
    name : {
      firstName : 'Joe'
  }
}

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

if(student && student.name && student.name.firstName){
    console.log('student First name exists')
}

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

if(student?.name?.firstName){
    console.log('student First name exists')
}

空值合并运算符 '??'

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

const foo = () => {
    return student.name?.firstName 
        ? student.name.firstName 
        : 'firstName do not exist'
}
console.log(foo())

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

const foo = () => {
    return student.name?.firstName ?? 'firstName do not exist'
}
console.log(foo())

很像或||运算符,但??只对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;
      }
  }
}

C'est-à-dire que le code va de gauche à droite, si vous rencontrez undefined, <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;
}

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer