8個JavaScript條件語句優化小技巧分享

Posted on 2022-07-05 by WalkonNet

1、Array.includes

來看下面的代碼：

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

在test方法中包含一個 if 語句，用來判斷傳入的參數animal是不是lion或者dog。這麼寫從語法上是沒問題的，但是如果 if 的判斷條件中不隻有兩個動物，而是有四隻動物。如果繼續使用 || 與運算符來寫的話，代碼就會很難維護並且看起來非常不優雅：

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

對於這種需要對同一個變量進行多次判斷的條件語句，可以使用數組的 includes() 方法來優化，該方法可以用於確定數組中是否存在指定元素，如果存在指定的元素，就會返回 true ，如果不存在就會返回 false 。使用 includes() 來修改寫上面的代碼：

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

這樣代碼看起來就簡潔瞭很多，並且如果想繼續增加其他的動物，隻需在數組中繼續增加元素即可。

2、Array.every

來看下面的代碼：

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 中的數組提供瞭every()方法，該方法用於檢查數組中所有元素是否滿足給定條件。當每個數組元素都滿足給定條件時會返回 true，否則會返回false。可以使用該方法來優化上面的代碼：

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 是一種將函數體減少else語句的簡單方法。來看下面的代碼：

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

來使用這種模式來優化上面的代碼，可以在無效條件時盡早返回：

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');
    }
  }
}

可以進一步優化，如果 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語句，使得函數更加清晰和簡潔。

4、三元運算符

對於上面例子中的函數，可以使用 JavaScript 的三元運算符來重構：

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

對於上面的三元表達式，還可以進行簡化：

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

對於這種if…else塊中都分別隻有一個表達式的情況，就可以使用三元表達式來簡化if…else語句。

5、switch…case

來看下面的代碼：

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

對於這種if的判斷條件中都是針對一個變量進行判斷的情況，可以使用switch…case來改寫，這樣代碼看起來更有調理：

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

對於上面的代碼，可以使用對象來繼續優化：

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 來實現相同的結果：

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、默認函數參數和解構

來看下面的代碼：

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

可以使用函數默認參數來簡化上面的代碼：

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

那如果flower參數是一個對象怎麼辦呢？來看下面的代碼：

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

可以從對象中解構需要的屬性：

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

在函數中需要flower對象中的name屬性，可以使用{name}來解構該參數。除此之外，還可以用{}來作為參數的默認值，這樣在check(undefined)時，也就是參數不是對象時，參數默認為一個空對象，否則就會報錯，因為undefined中沒有name屬性。

8、邏輯與運算符

來看下面的代碼：

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

對於邏輯與運算符，其左側的條件如果為false，就會直接發生短路，不再繼續往後執行；如果左側的條件為true，就會返回其右側的計算結果。所以，對於這種 if 中隻有一行表達式的情況，可以使用邏輯與運算符來簡化，其中左側為判斷條件，右側是要執行的邏輯：

(a < 0 && b > 100 && c === 10) && fn();

以上就是8個JavaScript條件語句優化小技巧分享的詳細內容，更多關於JavaScript條件語句優化的資料請關註WalkonNet其它相關文章！

8個JavaScript條件語句優化小技巧分享

目錄

1、Array.includes

2、Array.every

3、盡早 return

4、三元運算符

5、switch…case

6、Map/Object

7、默認函數參數和解構

8、邏輯與運算符

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

1、Array.includes

2、Array.every

3、盡早 return

4、三元運算符

5、switch…case

6、Map/Object

7、默認函數參數和解構

8、邏輯與運算符

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆