짧고 간결한 JS 코드 작성을 위한 4가지 팁 (공유)-JS 튜토리얼-php.cn

짧고 간결한 JS 코드 작성을 위한 4가지 팁 (공유)

青灯夜游

풀어 주다： 2021-10-28 10:13:29

앞으로

1987명이 탐색했습니다.

JS 코드를 더 짧게 작성하는 방법은 무엇인가요? 다음 글에서는 짧고 간결한 JS 코드 작성을 위한 4가지 팁을 공유하겠습니다. 이 글이 여러분에게 도움이 되기를 바랍니다.

짧고 간결한 JS 코드 작성을 위한 4가지 팁 (공유)

단락

Javascript의 논리 연산자 및 (&&)는 단락을 일으킬 수 있습니다. 예를 들어 与(&&)可以产生短路，例如

console.log(true && 0 && 2); // 0
console.log(true && &#39;test&#39; && 2) // 2

로그인 후 복사

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

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

로그인 후 복사

链判断运算符 '?'

假设有一个对象

const student = {
    name : {
      firstName : &#39;Joe&#39;
  }
}

로그인 후 복사

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

if(student && student.name && student.name.firstName){
    console.log(&#39;student First name exists&#39;)
}

로그인 후 복사

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

if(student?.name?.firstName){
    console.log(&#39;student First name exists&#39;)
}

로그인 후 복사

空值合并运算符 '??'

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

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

로그인 후 복사

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

const foo = () => {
    return student.name?.firstName ?? &#39;firstName do not exist&#39;
}
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;
      }
  }
}

로그인 후 복사

즉, 코드는 왼쪽에서 오른쪽으로 이동합니다. 정의되지 않음, null, 0 등이 발생하면 false 값으로 변환되며 계속해서 달리세요.

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

로그인 후 복사

연쇄 판단 연산자 '?'

객체가 있다고 가정

rrreee

firstname이 있으면 뭔가 하고 싶은데, 레이어별로 진행해야 합니다. 확인

rrreee

연속 판단 연산자는 특정 레이어에서 값을 얻을 수 없을 때 중지하고 정의되지 않은 값을 반환합니다.
rrreee

Null 값 병합 연산자 '??'

저희는 가끔 사용합니다 if...else...를 단순화하거나 기본값을 반환하는 삼항 연산rrreee

이 경우 null 값 병합을 통해 코드를 더욱 단순화할 수 있습니다🎜rrreee🎜 또는 || 연산자이지만 ??는 undefine 및 null에서만 작동하므로 값을 피할 수 있습니다. 문제가 없습니다🎜🎜🎜 if else 중첩을 피하세요🎜🎜🎜예를 들어🎜rrreee🎜else 조건을 제거하면 if else 중첩을 덜 복잡하게 만들 수 있습니다. return 문이 코드 실행을 중지하고 함수를 반환하기 때문입니다🎜rrreee🎜🎜Good 코드는 그렇지 않습니다. 때로는 너무 간소화된 코드로 인해 디버깅 프로세스가 더욱 번거로워지므로 특히 여러 사람이 공동 작업하는 경우에는 가독성이 가장 중요합니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 짧고 간결한 JS 코드 작성을 위한 4가지 팁 (공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!