>  기사  >  웹 프론트엔드  >  짧고 간결한 JS 코드 작성을 위한 4가지 팁 (공유)

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

青灯夜游
青灯夜游앞으로
2021-10-28 10:13:291959검색

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

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

단락

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

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

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

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

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제