淺談JS如何寫出漂亮的條件表達式
多條件語句
多條件語句使用Array.includes
舉個例子
function printAnimals(animal) {
if (animal === "dog" || animal === "cat") {
console.log(`I have a ${animal}`);
}
}
console.log(printAnimals("dog")); // I have a dog
這種寫法在條件比較少的情況下看起來沒有問題，此時我們只有 2 種動物，但是如果我們有更多的條件需要判斷（更多的動物）呢？如果我們繼續(xù)拓展判斷的條件，那么代碼將會變得難以維護，而且邏輯會不清晰。
解決方法
可以使用Array.includes來重寫條件語句
function printAnimals(animal) {
const animals = ["dog", "cat", "hamster", "turtle"];
if (animals.includes(animal)) {
console.log(`I have a ${animal}`);
}
}
console.log(printAnimals("hamster")); // I have a hamster
在這里，我們創(chuàng)建了一個動物數(shù)組，以便將條件與代碼的其余部分分開提取。現(xiàn)在，如果我們想要檢查任何其他動物，我們需要做的就是添加一個新的數(shù)組項。
我們還可以在這個函數(shù)的范圍之外使用 animals 變量，以便在代碼的其他地方重用它。這是一種編寫更清晰、更容易理解和維護的代碼的方法。不是嗎?
多屬性對象
這是一個非常好的技巧來壓縮你的代碼，使它看起來更簡潔。讓我們以前面的示例為例，添加更多的條件。如果這個動物不是一個簡單的字符串，而是一個具有某些屬性的對象呢?
所以現(xiàn)在的要求是:
- 如果沒有動物，拋出一個錯誤
- 打印動物的類型
- 打印動物的名字
- 打印動物的性別
const printAnimalDetails = (animal) => {
let result; // declare a variable to store the final value
// condition 1: check if animal has a value
if (animal) {
// condition 2: check if animal has a type property
if (animal.type) {
// condition 3: check if animal has a name property
if (animal.name) {
// condition 4: check if animal has a gender property
if (animal.gender) {
result = `${animal.name} is a ${animal.gender} ${animal.type};`;
} else {
result = "No animal gender";
}
} else {
result = "No animal name";
}
} else {
result = "No animal type";
}
} else {
result = "No animal";
}
return result;
};
console.log(printAnimalDetails()); // 'No animal'
console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'
console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'
console.log(
printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'
上面的代碼它工作得很好，但是代碼很長，很難維護。如果不使用提示工具，可能會浪費一些時間來確定右括號的位置。想象將會發(fā)生什么如果代碼更復(fù)雜的邏輯。很多if...else的語句!
我們可以使用三元操作符、&&條件等來重構(gòu)上面的函數(shù)，但是讓我們使用多個返回語句來編寫更精確的代碼。
const printAnimalDetails = ({ type, name, gender } = {}) => {
if (!type) return "No animal type";
if (!name) return "No animal name";
if (!gender) return "No animal gender";
// Now in this line of code, we're sure that we have an animal with all //the three properties here.
return `${name} is a ${gender} ${type}`;
};
console.log(printAnimalDetails()); // 'No animal type'
console.log(printAnimalDetails({ type: dog })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, name: "Lucy", gender: "female" })); // 'Lucy is a female dog'
在重構(gòu)版本中，還包括解構(gòu)和默認(rèn)參數(shù)。默認(rèn)參數(shù)確保如果我們將 undefined 作為參數(shù)傳遞給方法，我們?nèi)匀挥幸粋€要解構(gòu)的值，這里是一個空對象 {}。
通常，代碼是在這兩種方法之間編寫的。
舉個例子
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
// condition 1: vegetable should be present
if (vegetable) {
// condition 2: must be one of the item from the list
if (vegetables.includes(vegetable)) {
console.log(`I like ${vegetable}`);
// condition 3: must be large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}
} else {
throw new Error("No vegetable from the list!");
}
}
printVegetablesWithQuantity(null); // No vegetable from the list!
printVegetablesWithQuantity("cabbage"); // I like cabbage
printVegetablesWithQuantity("cabbage", 20);
// 'I like cabbage`
// 'I have bought a large quantity'
現(xiàn)在,我們有:
- 過濾無效條件的 if/else 語句
- 3 層嵌套的 if 語句(條件 1、2 和 3)
- 一個通用的規(guī)則是當(dāng)發(fā)現(xiàn)無效條件時盡早返回。
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
// condition 1: throw error early
if (!vegetable) throw new Error("No vegetable from the list!");
// condition 2: must be in the list
if (vegetables.includes(vegetable)) {
console.log(`I like ${vegetable}`);
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}
}
通過這樣做，我們減少了一個嵌套語句的級別。這種編碼風(fēng)格很好，特別是當(dāng)使用長if語句時。通過反轉(zhuǎn)條件并提前返回，我們可以進一步減少嵌套if。
請看下面的條件 2 是怎么做的:
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];
if (!vegetable) throw new Error("No vegetable from the list!");
// condition 1: throw error early
if (!vegetables.includes(vegetable)) return;
// condition 2: return from the function is the vegetable is not in
// the list
console.log(`I like ${vegetable}`);
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log("I have bought a large quantity");
}
}
通過反轉(zhuǎn)條件 2 的條件，代碼不再具有嵌套語句。當(dāng)我們有很多條件并且希望在任何特定條件不滿足時停止進一步的處理時，這種技術(shù)是有用的。
因此，總是以減少嵌套和盡早返回為目標(biāo)，但不要過度。
替換Switch語句
讓我們看一下下面的例子,我們想要根據(jù)顏色打印水果:
function printFruits(color) {
// use switch case to find fruits by color
switch (color) {
case "red":
return ["apple", "strawberry"];
case "yellow":
return ["banana", "pineapple"];
case "purple":
return ["grape", "plum"];
default:
return [];
}
}
printFruits(null); // []
printFruits("yellow"); // ['banana', 'pineapple']
上面的代碼實現(xiàn)沒有錯誤，但是很冗長，同樣的結(jié)果可以使用更簡潔的語法來實現(xiàn)。
// use object literal to find fruits by color
const fruitColor = {
red: ["apple", "strawberry"],
yellow: ["banana", "pineapple"],
purple: ["grape", "plum"],
};
function printFruits(color) {
return fruitColor[color] || [];
}
同樣的，也可以使用 Map 來實現(xiàn)：
// use Map to find fruits by color
const fruitColor = new Map()
.set("red", ["apple", "strawberry"])
.set("yellow", ["banana", "pineapple"])
.set("purple", ["grape", "plum"]);
function printFruits(color) {
return fruitColor.get(color) || [];
}
Map是 ES5 以來可用的對象類型，它允許存 key-value。
對于上面的示例，可以使用 Array.filter 實現(xiàn)相同的結(jié)果。
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 printFruits(color) {
return fruits.filter((fruit) => fruit.color === color);
}
默認(rèn)參數(shù)與解構(gòu)
在使用 JavaScript 時，我們總是需要檢查 null/undefined 并分配默認(rèn)值或編譯中斷。
function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1
if (!vegetable) return;
console.log(`We have ${quantity} ${vegetable}!`);
}
//results
}
printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!
如果蔬菜是一個對象呢?我們可以分配一個默認(rèn)參數(shù)嗎?
function printVegetableName(vegetable) {
if (vegetable && vegetable.name) {
console.log(vegetable.name);
} else {
console.log("unknown");
}
}
printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage
在上面的示例中，我們希望打印蔬菜名(如果它可用)或打印 unknown。
我們可以通過使用默認(rèn)參數(shù)&解構(gòu)來避免條件if (vegetable && vegetable.name){}。
// destructing - get name property only
// assign default empty object {}
function printVegetableName({ name } = {}) {
console.log(name || "unknown");
}
printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage
因為我們只需要屬性名，所以我們可以使用 {name} 來改變參數(shù)的結(jié)構(gòu)，然后我們可以在代碼中使用 name 作為變量，而不是使用 vegetable.name。
我們還將一個空對象 {} 賦值為默認(rèn)值，否則在執(zhí)行 printVegetableName(undefined) 時，它將給出一個錯誤—— Cannot destructure property name of undefined or null，因為在 undefined 中沒有 name 屬性。
匹配所有或部分條件
我們可以通過使用這些Array方法來減少代碼行數(shù)。
下面的代碼，我們想要檢查是否所有的水果都是紅色的:
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
}
使用可選鏈和 Nullish 合并
這兩個功能對于 JavaScript 編寫更簡潔的條件非常有用。在編寫本文時，它們還沒有得到完全的支持，可能需要使用Babel進行編譯。
可選鏈接能夠處理類似樹的結(jié)構(gòu)，而不需要顯式地檢查中間節(jié)點是否存在，并且Nullish與可選鏈接結(jié)合使用非常有效，可以確保不存在節(jié)點的默認(rèn)值。
舉個例子:
const car = {
model: "Fiesta",
manufacturer: {
name: "Ford",
address: {
street: "Some Street Name",
number: "5555",
state: "USA",
},
},
};
// to get the car model
const model = (car && car.model) || "default model";
// to get the manufacturer street
const street =
(car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.address.street) ||
"default street";
// request an un-existing property
const phoneNumber =
car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.phoneNumber;
console.log(model); // 'Fiesta'
console.log(street); // 'Some Street Name'
console.log(phoneNumber); // undefined
因此，如果我們想打印出來，如果汽車制造商來自美國，代碼應(yīng)該是這樣的:
const isManufacturerFromUSA = () => {
if (
car &&
car.manufacturer &&
car.manufacturer.address &&
car.manufacturer.address.state === "USA"
) {
console.log("true");
}
};
checkCarManufacturerState(); // 'true'
可以清楚地看到，對于更復(fù)雜的對象結(jié)構(gòu)，這會變得多么混亂。有一些第三方庫，如 lodash 或idx，它們有自己的功能。例如 lodash 有 _.get 方法。但是，在 JavaScript 語言本身中引入這個特性。
以下是這些新功能的工作原理:
// to get the car model
const model = car?.model ?? "default model";
// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? "default street";
// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
if (car?.manufacturer?.address?.state === "USA") {
console.log("true");
}
};
目前在 Stage 3 階段。
以上就是基于JavaScript實現(xiàn)條件表達式的一些分享，希望對你能有所幫助~
以上就是淺談JS如何寫出漂亮的條件表達式的詳細(xì)內(nèi)容，更多關(guān)于JS如何寫出漂亮的條件表達式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Javascript 使用function定義構(gòu)造函數(shù)
Javascript并不像Java、C#等語言那樣支持真正的類。但是在js中可以定義偽類。做到這一點的工具就是構(gòu)造函數(shù)和原型對象。首先介紹js中的構(gòu)造函數(shù)。2010-02-02
遮罩層實現(xiàn)浮層DIV登錄的效果，想必很多的朋友都有遇到過吧，實現(xiàn)起來也是很簡單的，下面有個不錯的實現(xiàn)，大家可以感受下2014-02-02
通過action傳過來的值在option獲取進行驗證，下面有個不錯的示例，需要的朋友不要錯過2013-11-11
談?wù)勎覍avaScript中typeof和instanceof的深入理解
這次主要說說javascript的類型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方，對本文感興趣的朋友一起看看吧2015-12-12
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
微信小程序使用this.setData()遇到的問題及解決方案詳解
this.setData估計是小程序中最經(jīng)常用到的一個方法,但是要注意其實他是有限制的,忽略這些限制的話,會導(dǎo)致數(shù)據(jù)無法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問題及解決方案,需要的朋友可以參考下2022-08-08
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對于js初學(xué)著必須理解this和srcElement的應(yīng)用，這也是面試中經(jīng)?？嫉降?。下面我們就通過幾個示例來詳細(xì)了解下2015-05-05
用showModalDialog彈出頁面后，提交表單總是彈出一個新窗口
用showModalDialog彈出頁面后，提交表單總是彈出一個新窗口,其實解決方法很簡單如下。2009-07-07
js focus不起作用的解決方法(主要是因為dom元素是否加載完成)
js focus不起作用的解決方法(主要是因為dom元素是否加載完成)2010-11-11
整理關(guān)于Bootstrap模態(tài)彈出框的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap模態(tài)彈出框的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03