JS中4個提升開發(fā)效率的小技巧

這篇文章將為大家詳細講解有關(guān)JS中4個提升開發(fā)效率的小技巧，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1、短路判斷

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

let x = 0;
let foo = () => console.log('執(zhí)行了');

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

通過使用&&運算符來實現(xiàn)同樣的if功能，如果&&之前的條件為false，則&&之后的代碼將不會執(zhí)行。

let x = 0;
let foo = () => console.log('執(zhí)行了');

x === 0 && foo()

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

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

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

2、可選鏈操作符 ( ? )

我們經(jīng)常會判斷JS對象中是否存在某個key，因為有時不確定后臺API返回的數(shù)據(jù)是否是正確的。

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終止函數(shù)

下面函數(shù)判斷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語句將終止代碼執(zhí)行并返回函數(shù)。

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

console.log(foo())

關(guān)于“JS中4個提升開發(fā)效率的小技巧”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。