快捷導(dǎo)航

JS 4個(gè)超級(jí)實(shí)用的小技巧提升開(kāi)發(fā)效率

更新時(shí)間：2021年09月29日 11:45:52 作者：傲夫靠斯

JS有很多小技巧可以使代碼更精簡(jiǎn)、更簡(jiǎn)單。今天主要分享4個(gè)技巧，在平時(shí)的工作中可以大大的縮短代碼量和開(kāi)發(fā)時(shí)間。,需要的朋友可以參考下面文章內(nèi)容喲

1、短路判斷

當(dāng)只需要簡(jiǎn)單的if條件時(shí)，可使用此方法

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

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

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

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

x === 0 && foo()

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

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

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

2、可選鏈操作符 ( ? )

我們經(jīng)常會(huì)判斷JS對(duì)象中是否存在某個(gè)key，因?yàn)橛袝r(shí)不確定后臺(tái)API返回的數(shù)據(jù)是否是正確的。

user對(duì)象中包含一個(gè)屬性name的對(duì)象，name對(duì)象有一個(gè)屬性firstName，使用user.name.firstName直接進(jìn)行判斷的話，如果name屬性不存在的話就會(huì)報(bào)錯(cuò)，所以在判斷之前還需要判斷user.name是否存在，需要嵌套兩層if判斷。

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

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

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

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

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

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

與if/else相比來(lái)說(shuō)，三元運(yùn)算符更加簡(jiǎn)短。如果邏輯簡(jiǎn)單，使用起來(lái)很方便。

例如：

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

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

console.log(foo())

首先使用?運(yùn)算符來(lái)判讀是否存在，存在即返回，不存在則返回false，進(jìn)入后面的邏輯

使用??運(yùn)算法使代碼更加精簡(jiǎn)

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條件來(lái)簡(jiǎn)化代碼，因?yàn)?code>return語(yǔ)句將終止代碼執(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個(gè)超級(jí)實(shí)用的小技巧提升開(kāi)發(fā)效率的文章就介紹到這了,更多相關(guān)4個(gè)實(shí)用JS小技巧提升開(kāi)發(fā)效率內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: