欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年09月29日 11:45:52   作者：傲夫靠斯  
JS有很多小技巧可以使代碼更精簡、更簡單。今天主要分享4個技巧，在平時的工作中可以大大的縮短代碼量和開發(fā)時間。,需要的朋友可以參考下面文章內(nèi)容喲

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條件，不過這也會增加語句的復雜性，不建議超過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ā)效率的文章就介紹到這了,更多相關(guān)4個實用JS小技巧 提升開發(fā)效率內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論