Heim  >  Artikel  >  Web-Frontend  >  4 Tipps zum Schreiben von kurzem und prägnantem JS-Code (Teilen)

4 Tipps zum Schreiben von kurzem und prägnantem JS-Code (Teilen)

青灯夜游
青灯夜游nach vorne
2021-10-28 10:13:291982Durchsuche

Wie kann der geschriebene JS-Code kürzer gemacht werden? Der folgende Artikel gibt Ihnen 4 Tipps zum Schreiben von kurzem und prägnantem JS-Code. Ich hoffe, er wird Ihnen hilfreich sein!

4 Tipps zum Schreiben von kurzem und prägnantem JS-Code (Teilen)

Kurzschluss

Die logischen Operatoren und (&&) in Javascript können einen Kurzschluss verursachen, zum Beispiel 与(&&)可以产生短路,例如

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;
      }
  }
}

Das heißt, der Code geht von links nach rechts, wenn Sie stoßen auf undefiniert, null, 0 usw. werden in Werte von false konvertiert und nicht weiterlaufen.

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;
}

Kettenbeurteilungsoperator '?'

Angenommen, es gibt ein Objekt

rrreee

Wir möchten etwas tun, wenn Vorname existiert, wir müssen Schicht für Schicht prüfen

rrreee
Der Kettenbeurteilungsoperator stoppt und gibt undefiniert zurück, wenn auf einer bestimmten Ebene kein Wert abgerufen werden kann

rrreee

Nullwert-Zusammenführungsoperator '??'

Wir verwenden manchmal Ternäre Operationen, um if...else... zu vereinfachen oder einen Standardwert zurückzugeben >||-Operator, aber ?? funktioniert nur bei undefiniert und null, wodurch Werte vermieden werden können. Es ist kein Problem

🎜 Versuchen Sie, die Verschachtelung von if else zu vermeiden 🎜🎜🎜 Zum Beispiel 🎜rrreee🎜 Durch Entfernen der else-Bedingung können Sie die Verschachtelung von if else weniger komplex machen, da die Return-Anweisung die Codeausführung stoppt und die Funktion zurückgibt 🎜rrreee🎜🎜 Gut, der Code hat keine Der Code muss so kurz wie möglich sein. Manchmal wird der Debugging-Prozess schwieriger, daher ist die Lesbarkeit das Wichtigste, insbesondere bei der Zusammenarbeit mit mehreren Personen. 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt von4 Tipps zum Schreiben von kurzem und prägnantem JS-Code (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen