在JavaScript中編寫更好的條件的5個技巧

1.對多個條件使用Array.includes

我們來看看下面的例子：

// condition
function test(fruit) {
 if (fruit == 'apple' || fruit == 'strawberry') {
 console.log('red');
 }
}

乍一看，上面的例子看起來不錯。然而，如果我們得到更多的紅色水果，說的cherry和cranberries？我們是否會更多地擴展聲明||？

我們可以使用（Array.includes）重寫上面的條件Array.includes

function test(fruit) {
 // extract conditions to array
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 if (redFruits.includes(fruit)) {
 console.log('red');
 }
}

我們將red fruits（條件）提取到數組中。通過這樣做，代碼看起來更整潔。

2.較少嵌套，早退

讓我們擴展前面的示例以包含另外兩個條件：

• 如果沒有提供水果，拋出錯誤
• 如果超過10，則接受並打印水果數量。

function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 // condition 1: fruit must has value
 if (fruit) {
 // condition 2: must be red
 if (redFruits.includes(fruit)) {
 console.log('red');
 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
 }
 } else {
 throw new Error('No fruit!');
 }
}
// test results
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity

看看上面的代碼，我們有：

• 1 if / else語句過濾掉無效條件
• 3級嵌套if語句（條件1,2和3）

我個人遵循的一般規則是在發現無效條件時提前返回。

/_ return early when invalid conditions found _/
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 // condition 1: throw error early
 if (!fruit) throw new Error('No fruit!');
 // condition 2: must be red
 if (redFruits.includes(fruit)) {
 console.log('red'); 

 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
 }
}

通過這樣做，我們有一個較少級別的嵌套語句。這種編碼風格很好，特別是當你有很長的if語句時（想象你需要滾動到最底層才知道有一個else語句，而不是很酷）。

如果通過反轉條件並提前返回，我們可以進一步減少嵌套。請查看下面的條件2，看看我們是如何做到的：

/_ return early when invalid conditions found _/
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
 if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
 console.log('red');
 // condition 3: must be big quantity
 if (quantity > 10) {
 console.log('big quantity');
 }
}

通過反轉條件2的條件，我們的代碼現在沒有嵌套語句。當我們有很長的邏輯時，這種技術非常有用，我們希望在條件不滿足時停止進一步的處理。

但是，這樣做並不是一件難事

對我來說，我只是把它留作以前的版本（條件2嵌套）。這是因為：

• 代碼簡短直接，嵌套if更清晰
• 反轉條件可能會引發更多的思考過程（增加認知負荷）

因此，始終旨在儘早減少築巢和迴歸，但不要過度。如果您感興趣，有一篇文章和StackOverflow討論會進一步討論這個主題：

• 避免其他，早期由蒂姆奧克斯利迴歸
• StackOverflow討論 if / else編碼風格

3.使用默認功能參數和解構

我想下面的代碼可能看起來很熟悉，我們總是需要檢查null/ undefined值並在使用JavaScript時分配默認值：

function test(fruit, quantity) {
 if (!fruit) return;
 const q = quantity || 1; // if quantity not provided, default to one
 console.log(`We have ${q} ${fruit}!`);
} 

//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

實際上，我們可以q通過分配默認函數參數來消除變量。

function test(fruit, quantity = 1) { // if quantity not provided, default to one
 if (!fruit) return;
 console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!

更簡單直觀不是嗎？請注意，每個參數都有自己的默認函數參數。例如，我們也可以指定默認值fruit：function test(fruit = 'unknown', quantity = 1)。

如果我們fruit是一個對象怎麼辦？我們可以指定默認參數嗎？

function test(fruit) { 
 // printing fruit name if value provided
 if (fruit && fruit.name) {
 console.log (fruit.name);
 } else {
 console.log('unknown');
 }
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

看看上面的例子，我們想要打印水果名稱，如果它可用，或者我們將打印未知。我們可以避免fruit && fruit.name使用默認函數參數和破壞進行條件檢查。

// destructing - get name property only
// assign default empty object {}
function test({name} = {}) {
 console.log (name || 'unknown');
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

由於我們只需要name來自水果的屬性，我們可以使用構造參數{name}，然後我們可以name在代碼中使用變量代替fruit.name。

我們還將空對象指定{}為默認值。如果我們不這樣做，你在執行行時會出錯test(undefined)- Cannot destructure property name of 'undefined' or 'null'.因為nameundefined中沒有屬性。

如果您不介意使用第三方庫，有幾種方法可以減少空檢查：

• 使用Lodash獲取功能
• 使用Facebook開源的idx庫（與Babeljs）

以下是使用Lodash的示例：

// Include lodash library, you will get _
function test(fruit) {
 console.log(__.get(fruit, 'name', 'unknown'); // get property name, if not available, assign default value 'unknown'
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

您可以在此處運行演示代碼。此外，如果您是功能編程（FP）的粉絲，您可以選擇使用Lodash fp，Lodash的功能版本（方法更改為get或getOr）。

4.支持Map / Object Literal而不是Switch語句

讓我們看看下面的例子，我們想根據顏色打印水果：

function test(color) {
 // use switch case to find fruits in color
 switch (color) {
 case 'red':
 return ['apple', 'strawberry'];
 case 'yellow':
 return ['banana', 'pineapple'];
 case 'purple':
 return ['grape', 'plum'];
 default:
 return [];
 }
}
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']

上面的代碼似乎沒有錯，但我覺得它很冗長。使用具有更清晰語法的object literal可以實現相同的結果：

// use object literal to find fruits in color
 const fruitColor = {
 red: ['apple', 'strawberry'],
 yellow: ['banana', 'pineapple'],
 purple: ['grape', 'plum']
 };
function test(color) {
 return fruitColor[color] || [];
}

或者，您可以使用Map來實現相同的結果：

// use Map to find fruits in color
 const fruitColor = new Map()
 .set('red', ['apple', 'strawberry'])
 .set('yellow', ['banana', 'pineapple']) 

 .set('purple', ['grape', 'plum']);
function test(color) {
 return fruitColor.get(color) || [];
}

Map是自ES2015以來可用的對象類型，允許您存儲鍵值對。

我們應該禁止使用switch語句嗎？不要侷限於此。就個人而言，我儘可能使用對象文字，但我不會設置硬規則來阻止它，使用對你的場景有意義的。

Todd Motto有一篇文章深入研究switch語句與對象文字，你可以在這裡閱讀。

TL; DR; 重構語法

對於上面的例子，我們實際上可以重構我們的代碼以獲得相同的結果Array.filter。

 const fruits = [
 { name: 'apple', color: 'red' }, 
 { name: 'strawberry', color: 'red' }, 
 { name: 'banana', color: 'yellow' }, 
 { name: 'pineapple', color: 'yellow' }, 
 { name: 'grape', color: 'purple' }, 
 { name: 'plum', color: 'purple' }
];
function test(color) {
 // use Array filter to find fruits in color
 return fruits.filter(f => f.color == color);
}

總有不止一種方法可以達到相同的效果。我們用相同的例子展示了4。編碼很有趣！

5.對所有/部分標準使用Array.every和Array.some

最後一個提示更多的是利用新的（但不是那麼新的）Javascript Array函數來減少代碼行。看下面的代碼，我們想檢查所有水果是否都是紅色的：

const fruits = [
 { name: 'apple', color: 'red' },
 { name: 'banana', color: 'yellow' },
 { name: 'grape', color: 'purple' }
 ];
function test() {
 let isAllRed = true;
 // condition: all fruits must be red
 for (let f of fruits) {
 if (!isAllRed) break;
 isAllRed = (f.color == 'red');
 }
 console.log(isAllRed); // false
}

代碼太長了！我們可以通過以下方式減少行數Array.every：

const fruits = [
 { name: 'apple', color: 'red' },
 { name: 'banana', color: 'yellow' },
 { name: 'grape', color: 'purple' }
 ];
function test() {
 // condition: short way, all fruits must be red
 const isAllRed = fruits.every(f => f.color == 'red');
 console.log(isAllRed); // false
}

現在更乾淨了嗎？以類似的方式，如果我們想測試任何水果是否是紅色，我們可以用Array.some它來實現它。

const fruits = [ 

 { name: 'apple', color: 'red' },
 { name: 'banana', color: 'yellow' },
 { name: 'grape', color: 'purple' }
];
function test() {
 // condition: if any fruit is red
 const isAnyRed = fruits.some(f => f.color == 'red');
 console.log(isAnyRed); // true
}

• 1.對多個條件使用Array.includes
• 2.較少嵌套，早退
• 3.使用默認功能參數和解構
• 4.支持Map / Object Literal而不是Switch語句
• 5.對所有/部分標準使用Array.every和Array.some

閱讀更多 前端小學生 的文章

關鍵字: 菠蘿 水果 示例