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

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

青灯夜游
Freigeben: 2021-10-28 10:13:29
nach vorne
2019 Leute haben es durchsucht

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
Nach dem Login kopieren

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

x == 0 && foo()
// 等价于
if( x == 0 ){
  foo()
}
Nach dem Login kopieren

链判断运算符 '?'

假设有一个对象

const student = {
    name : {
      firstName : 'Joe'
  }
}
Nach dem Login kopieren

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

if(student && student.name && student.name.firstName){
    console.log('student First name exists')
}
Nach dem Login kopieren

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

if(student?.name?.firstName){
    console.log('student First name exists')
}
Nach dem Login kopieren

空值合并运算符 '??'

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

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

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

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

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

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;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage