JS 4個超級實用的小技巧 提升開發效率

Posted on by

1、短路判斷

當隻需要簡單的if條件時，可使用此方法

let x = 0;
let foo = () => console.log('執行瞭');

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

通過使用&&運算符來實現同樣的if功能，如果&&之前的條件為false，則&&之後的代碼將不會執行。

let x = 0;
let foo = () => console.log('執行瞭');

x === 0 && foo()

還可增加更多的if條件，不過這也會增加語句的復雜性，不建議超過2個以上條件。

let x = 0;
let y = 0;
let foo = () => console.log('執行瞭');

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

2、可選鏈操作符 ( ? )

我們經常會判斷JS對象中是否存在某個key，因為有時不確定後臺API返回的數據是否是正確的。

user對象中包含一個屬性name的對象，name對象有一個屬性firstName，使用user.name.firstName直接進行判斷的話，如果name屬性不存在的話就會報錯，所以在判斷之前還需要判斷user.name是否存在，需要嵌套兩層if判斷。

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name){
  if(user.name.firstName){
    console.log('user對象 包含 firstName 字段')
  }
}

這時我們可以使用?操作符進行簡化操作，如果user.name不存在，也將返回false，所以直接使用一層判斷

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

if(user.name?.firstName){
  console.log('user對象 包含 firstName 字段')
}

3、空值合並操作符 ( ?? )

與if/else相比來說，三元運算符更加簡短。如果邏輯簡單，使用起來很方便。

例如：

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ? 
    user.name.firstName : 
    'firstName 不存在'
}

console.log(foo())

首先使用?運算符來判讀是否存在，存在即返回，不存在則返回false，進入後面的邏輯

使用??運算法使代碼更加精簡

let user = {
  name : {
    firstName : '傲夫靠斯'
  }
}

let foo = () => {
  return user.name?.firstName ?? 
  'firstName 不存在'
}
  
console.log(foo())

4、return終止函數

下面函數判斷x的值，使用大量if else嵌套

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小於 1'
  } else {
    if(x > 1){
      return 'x 大於 1'
    }else{
      return 'x 等於 1'
    }
  }
}

console.log(foo())

這種if else嵌套可以刪除else條件來簡化代碼，因為return語句將終止代碼執行並返回函數。

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x 小於 1'
  }
  if(x > 1){
    return 'x 大於 '
  }
  return 'x 等於 1'
}

console.log(foo())

到此這篇關於JS 4個超級實用的小技巧 提升開發效率的文章就介紹到這瞭,更多相關4個實用JS小技巧 提升開發效率內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：