快捷導(dǎo)航

8個(gè)JavaScript條件語(yǔ)句優(yōu)化小技巧分享

更新時(shí)間：2022年07月04日 16:59:47 作者：CUGGZ

在日常的開(kāi)發(fā)中，我們經(jīng)常會(huì)編寫(xiě)一些條件語(yǔ)句，過(guò)多的?if...else會(huì)導(dǎo)致代碼難以理解和維護(hù)，今天小編來(lái)分享幾個(gè)優(yōu)化條件語(yǔ)句的小技巧，希望對(duì)大家有所幫助

1、Array.includes

來(lái)看下面的代碼：

function test(animal) {
  if (animal == 'lion' || animal == 'dog') {
    return animal;
  }
  return '';
}
test('dog');

在test?方法中包含一個(gè) if? 語(yǔ)句，用來(lái)判斷傳入的參數(shù)animal?是不是lion?或者dog?。這么寫(xiě)從語(yǔ)法上是沒(méi)問(wèn)題的，但是如果 if? 的判斷條件中不只有兩個(gè)動(dòng)物，而是有四只動(dòng)物。如果繼續(xù)使用 || 與運(yùn)算符來(lái)寫(xiě)的話(huà)，代碼就會(huì)很難維護(hù)并且看起來(lái)非常不優(yōu)雅：

if (animal == 'lion' || animal == 'dog' || animal == 'cow' || animal == 'cat') {
    return animal;
}

對(duì)于這種需要對(duì)同一個(gè)變量進(jìn)行多次判斷的條件語(yǔ)句，可以使用數(shù)組的? ?includes()? ??方法來(lái)優(yōu)化，該方法可以用于確定數(shù)組中是否存在指定元素，如果存在指定的元素，就會(huì)返回 ? ?true? ??，如果不存在就會(huì)返回 ? ?false? ??。使用 ? ?includes()? ? 來(lái)修改寫(xiě)上面的代碼：

if (['dog', 'cat', 'cow', 'lion'].includes(animal)) {
    return animal;
}

這樣代碼看起來(lái)就簡(jiǎn)潔了很多，并且如果想繼續(xù)增加其他的動(dòng)物，只需在數(shù)組中繼續(xù)增加元素即可。

2、Array.every

來(lái)看下面的代碼：

const cars = [
    { name: 'car1', color: 'red' },
    { name: 'car2', color: 'blue' },
    { name: 'car3', color: 'purple' }
]; 
function test(cars) {
    let isAllblue = true;
  
    for (let c of cars) {
        if (!isAllblue) break;
        isAllblue = (c.color == 'blue');
    } 
    return isAllblue;
}
test(cars);

JavaScript 中的數(shù)組提供了every()?方法，該方法用于檢查數(shù)組中所有元素是否滿(mǎn)足給定條件。當(dāng)每個(gè)數(shù)組元素都滿(mǎn)足給定條件時(shí)會(huì)返回 true?，否則會(huì)返回false?？梢允褂迷摲椒▉?lái)優(yōu)化上面的代碼：

const cars = [
    { name: 'car1', color: 'red' },
    { name: 'car2', color: 'blue' },
    { name: 'car3', color: 'purple' }
];  
function test(cars) {
   return cars.every(c => c.color == 'blue');
}
test(cars);

3、盡早 return

在 JavaScript 中，盡早 return? 是一種將函數(shù)體減少else語(yǔ)句的簡(jiǎn)單方法。來(lái)看下面的代碼：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (fruit) {
    if (redFruits.includes(fruit)) {
      console.log('red');

      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}
test(null); // error: No fruits
test('apple'); // red
test('apple', 20); // red, big quantity

來(lái)使用這種模式來(lái)優(yōu)化上面的代碼，可以在無(wú)效條件時(shí)盡早返回：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (!fruit) throw new Error('No fruit!');
  if (redFruits.includes(fruit)) {
    console.log('red');
    if (quantity > 10) {
      console.log('big quantity');
    }
  }
}

可以進(jìn)一步優(yōu)化，如果 redFruits? 中不包含fruit，就提前返回：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (!fruit) throw new Error('No fruit!');
  if (!redFruits.includes(fruit)) return;
  console.log('red');
  if (quantity > 10) {
    console.log('big quantity');
  }
}

可以看到，使用這種模式可以消除不必要的else語(yǔ)句，使得函數(shù)更加清晰和簡(jiǎn)潔。

4、三元運(yùn)算符

對(duì)于上面例子中的函數(shù)，可以使用 JavaScript 的三元運(yùn)算符來(lái)重構(gòu)：

function IsRed(someObject) {
    return typeof someObject !== 'object' || someObject.color !== 'Red' ? false : true;
}

對(duì)于上面的三元表達(dá)式，還可以進(jìn)行簡(jiǎn)化：

function IsRed(someObject) {
    return !(typeof someObject !== 'object' || someObject.color !== 'Red');
}

對(duì)于這種if...else?塊中都分別只有一個(gè)表達(dá)式的情況，就可以使用三元表達(dá)式來(lái)簡(jiǎn)化if...else語(yǔ)句。

5、switch...case

來(lái)看下面的代碼：

function printCars(color) {
    if (color === 'red') {
      return ['Rcar1', 'Rcar2'];
    }
    else if (color === 'blue') {
      return ['Bcar1', 'Bcar2'];
    }
    else if (color === 'purple') {
      return ['Pcar1', 'Pcar2'];
    }
    return [];
}

對(duì)于這種if?的判斷條件中都是針對(duì)一個(gè)變量進(jìn)行判斷的情況，可以使用switch...case來(lái)改寫(xiě)，這樣代碼看起來(lái)更有調(diào)理：

function printCars(color) {
    switch (color) {
        case 'red':
            return ['Rcar1', 'Rcar2'];
        case 'blue':
            return ['Bcar1', 'Bcar2'];
        case 'purple':
            return ['Pcar1', 'Pcar2'];
        default:
            return [];
    }
}

6、Map/Object

對(duì)于上面的代碼，可以使用對(duì)象來(lái)繼續(xù)優(yōu)化：

const carColor = {
    red: ['Rcar1', 'Rcar2'],
    blue: ['Bcar1', 'Bcar2'],
    purple: ['Pcar1', 'Pcar2']
};  
function printcars(color) {
    return carColor[color] || [];
}
console.log(printcars());       // []
console.log(printcars('red'));  // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

也可以使用 Map 來(lái)實(shí)現(xiàn)相同的結(jié)果：

const carColor = new Map()
    .set('red', ['Rcar1', 'Rcar2'])
    .set('blue', ['Bcar1', 'Bcar2'])
    .set('purple', ['Pcar1', 'Pcar2']);  
function printcars(color) {
    return carColor.get(color) || [];
}
console.log(printcars());       // []
console.log(printcars('red'));  // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

7、默認(rèn)函數(shù)參數(shù)和解構(gòu)

來(lái)看下面的代碼：

function check(flower, quantity) {
    if (!flower) return;  
    const num = quantity || 1; 
    return `${num}朵${flower}`;
} 
check('玫瑰');    // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉

可以使用函數(shù)默認(rèn)參數(shù)來(lái)簡(jiǎn)化上面的代碼：

function check(flower, quantity = 1) {
    if (!flower) return;
    return `${quantity}朵${flower}`;
}
check('玫瑰');    // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉

那如果flower參數(shù)是一個(gè)對(duì)象怎么辦呢？來(lái)看下面的代碼：

function check(flower) {
    if (flower && flower.name) {
        console.log(flower.name);
    } else {
        console.log('unknown');
    }
}
check(undefined);  // unknown
check({});  // unknown
check({ name: '玫瑰', color: 'red' });  // 玫瑰

可以從對(duì)象中解構(gòu)需要的屬性：

function check({name} = {}) {
    console.log (name || 'unknown');
}  
check(undefined);  // unknown
check({});  // unknown
check({ name: '玫瑰', color: 'red' });  // 玫瑰

在函數(shù)中需要flower?對(duì)象中的name?屬性，可以使用{name}?來(lái)解構(gòu)該參數(shù)。除此之外，還可以用{}?來(lái)作為參數(shù)的默認(rèn)值，這樣在check(undefined)?時(shí)，也就是參數(shù)不是對(duì)象時(shí)，參數(shù)默認(rèn)為一個(gè)空對(duì)象，否則就會(huì)報(bào)錯(cuò)，因?yàn)閡ndefined?中沒(méi)有name屬性。

8、邏輯與運(yùn)算符

來(lái)看下面的代碼：

if(a < 0 && b > 100 && c === 10) {
  fn()
}

對(duì)于邏輯與運(yùn)算符，其左側(cè)的條件如果為false?，就會(huì)直接發(fā)生短路，不再繼續(xù)往后執(zhí)行；如果左側(cè)的條件為true?，就會(huì)返回其右側(cè)的計(jì)算結(jié)果。所以，對(duì)于這種 if 中只有一行表達(dá)式的情況，可以使用邏輯與運(yùn)算符來(lái)簡(jiǎn)化，其中左側(cè)為判斷條件，右側(cè)是要執(zhí)行的邏輯：