缩短代码的 4 个 JavaScript 技巧

原文标题：

Photo by Shahadat Rahman on Unsplash

有很多技巧可以用来使 javascript 代码更短，更简单。我将分享四个这样的技巧，它们在编码时大大减少了我的工作量和开发时间。

"短路"

译者注："短路"是指前面的条件不成立时后面的表达式将不会被执行。

常见的“短路运算符”有 && 和 ||。

比如 condition1 && condition2，如果 condition1 为 false ,则 condition2 将不会被执行。

比如 condition1 || condition2，如果 condition1 为 true ,则 condition2 将不会被执行。

当您在使用简单的 if 条件时，可以使用这种方式简写代码，非常有效。

if( x == 0 ){
  foo()
}

"短路"可以使用&& 运算符实现。如果 && 之前的条件计算结果为 false，则 && 之后的代码将不会被执行。

// 译者注：在这里,如果表达式'x == 0'为 flase,那么后面的表达式’foo()‘将不会被执行 
x == 0 && foo()

可以使用链式使用 && 运算来代替多个 if 表达式

x == 0 && y == 0 && foo()

使用 ? 运算符判断对象属性是否存在

如果您正在处理诸如 API 调用之类的场景或您不确定其或其键是否已初始化的对象，使用 ? 去访问对象属性将会非常有用

假设一个带有键名为 name 的对象 studentObject。使用 studentObject.name 直接访问键值可能会抛出错误。判断对象的键名是否存在的一种方法是使用嵌套的 if 条件。

if(studentObject){
  if(studentObject.name}{
    console.log('student name exists')
  }
}

上面的代码可以使用 ? 运算符来简化代码。如果 studentObject 不存在，它将评估为 false。

if(studentObject?.name){
  console.log('student name exists')
}

空值合并操作符(??)

与 if else 语句相比，三元运算符已经使代码简短。如果要执行的代码量很少，这很方便。

const foo = () => {
  x ? x : 'x do not exist'
}

在上面这个例子中，如果您必须将操作数返回到“?”的左侧，您可以使用“??”运算符使代码更短。

const foo = () => {
  x ?? 'x do not exist'
}

用return 代替if else嵌套

考虑以下检查“x”值的函数。

const foo = () => {
  if(x<1){
    return 'x is less than 1'
  }else{
    if(x > 1){
      return 'x is greater than 1'
    }else{
      return 'x is equal to 1'
    }
  }
}

通过删除else条件可以降低if-else嵌套的复杂性，因为return语句将停止函数执行并返回结果。

const foo = () => {
  if(x<1){
    return 'less than 1'
  }
  if(x>1){
    return 'x is greater than 1'
  }
  return 'x is equal to 1'
}