當咱們寫JavaScript代碼時,常常會用到到條件判斷處理,這裏有5個技巧能使你寫出更好、更簡潔的條件語句。javascript
讓咱們來看一下的例子:java
// conditionfunction test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}}
複製代碼
一眼看去,以上的例子貌似沒有什麼問題。可是,若是咱們加入更多的紅色水果,好比車釐子(cherry)和蔓越橘(cranberries)?那就要使用||寫更多的條件判斷了。 爲了解決以上問題,咱們可使用Array.includes來重寫以上的條件判斷。看如下例子:git
function test(fruit) {
// extract conditions to array
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}}
複製代碼
將這些「紅色水果」(條件)提取到數組裏面,這樣寫就會看起來很簡潔了。github
下面咱們增長兩個條件判斷來擴展下上一個例子:編程
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
複製代碼
看着以上的代碼,發現如下的問題:數組
/_ 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語言,這樣不酷)。 咱們也能夠用相反的條件判斷和儘早返回來減小if語句嵌套,看如下第二個條件是如何處理的。bash
/_ 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嵌套)更好或者更具可讀性。app
對我來講,我只會遠離以前的那種寫法(在條件2嵌套),注意有如下兩個緣由:ide
所以,始終旨在減小嵌套和及時及早返回(return),可是不要過分去這樣作。若是感興趣能夠查看如下的一篇相關文章和在StackOverflow的關於這主題的更多討論:函數式編程
我猜如下的代碼你看起來應該很熟悉了,咱們仍然須要在執行JavaScript時檢查空值(undefined或null)。
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!
複製代碼
事實上,咱們能夠消除變量p來分配函數默認參數。看如下例子:
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參數是Object類型怎麼辦?咱們能夠指定默認值嗎?
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的名稱若是值存在的話,不然打印出「unknow」。咱們能夠經過檢查默認函數參數和對象解構來避免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
複製代碼
因爲咱們只須要fruit對象的name屬性,可使用{name}來解構對象,而後咱們能夠在代碼中使用name做爲變量代替fruit.name。 咱們還將分配空對象{}做爲默認參數。若是不這樣作的話,在執行test(undefined)這行代碼時就會報錯:沒法解析’undefined’或’null’的屬性name,由於undefined沒有name這個屬性。 若是你不介意使用第三方庫,有幾個方法能夠減小空值檢查。
如下是使用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
複製代碼
你能夠在這裏執行這個demo。另外,若是你熱衷於使用函數式編程(FP),你可能會選擇用Lodash fp,Lodash的函數式版本(方法改成get或getOr)。
咱們來看看如下例子:
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']
複製代碼
以上的代碼看起來貌似沒什麼錯誤,可是我發現代碼十分雜亂。其實能夠用字面量對象更清晰的語法來實現相同的結果。例如:
// 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是自ES6開始纔可用的對象類型,能夠用來存儲鍵值對。
最後一個技巧是關於利用新的(其實不是很新了)JavaScript數組方法來減小代碼函數。看看下面的代碼,咱們想全部的水果是否都是紅色的。
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
}
複製代碼
讓咱們一塊兒生成更多可讀代碼。 我但願你能在本文中學到一些新東西。 就這樣。 寫代碼快樂! (完)
以上譯文僅用於學習交流,水平有限,不免有錯誤之處,敬請指正。