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

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!

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

即代码从左往右，如果遇到undefined，null，0等等会被转化为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())

很像或||运算符，但??只对undefined 和 null

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

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

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

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

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!