建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是 CUGGZ。
創(chuàng)新互聯(lián)建站長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為明水企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)，明水網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
在日常的開發(fā)中，我們經(jīng)常會(huì)編寫一些條件語句，過多的 ??if...else??會(huì)導(dǎo)致代碼難以理解和維護(hù)，今天來分享幾個(gè)優(yōu)化條件語句的小技巧！
1、Array.includes
來看下面的代碼：
function test(animal) {
if (animal == 'lion' || animal == 'dog') {
return animal;
}
return '';
}
test('dog');在test?方法中包含一個(gè) if? 語句，用來判斷傳入的參數(shù)animal?是不是lion?或者dog?。這么寫從語法上是沒問題的，但是如果 if? 的判斷條件中不只有兩個(gè)動(dòng)物，而是有四只動(dòng)物。如果繼續(xù)使用 || 與運(yùn)算符來寫的話，代碼就會(huì)很難維護(hù)并且看起來非常不優(yōu)雅：
if (animal == 'lion' || animal == 'dog' || animal == 'cow' || animal == 'cat') {
return animal;
}對于這種需要對同一個(gè)變量進(jìn)行多次判斷的條件語句，可以使用數(shù)組的??includes()???方法來優(yōu)化，該方法可以用于確定數(shù)組中是否存在指定元素，如果存在指定的元素，就會(huì)返回 ??true???，如果不存在就會(huì)返回 ??false???。使用 ??includes()?? 來修改寫上面的代碼：
if (['dog', 'cat', 'cow', 'lion'].includes(animal)) {
return animal;
}這樣代碼看起來就簡潔了很多，并且如果想繼續(xù)增加其他的動(dòng)物，只需在數(shù)組中繼續(xù)增加元素即可。
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 中的數(shù)組提供了every()?方法，該方法用于檢查數(shù)組中所有元素是否滿足給定條件。當(dāng)每個(gè)數(shù)組元素都滿足給定條件時(shí)會(huì)返回 true?，否則會(huì)返回false?？梢允褂迷摲椒▉韮?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語句的簡單方法。來看下面的代碼：
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來使用這種模式來優(yōu)化上面的代碼，可以在無效條件時(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語句，使得函數(shù)更加清晰和簡潔。
4、三元運(yùn)算符
對于上面例子中的函數(shù)，可以使用 JavaScript 的三元運(yùn)算符來重構(gòu)：
function IsRed(someObject) {
return typeof someObject !== 'object' || someObject.color !== 'Red' ? false : true;
}對于上面的三元表達(dá)式，還可以進(jìn)行簡化：
function IsRed(someObject) {
return !(typeof someObject !== 'object' || someObject.color !== 'Red');
}對于這種if...else?塊中都分別只有一個(gè)表達(dá)式的情況，就可以使用三元表達(dá)式來簡化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?的判斷條件中都是針對一個(gè)變量進(jìn)行判斷的情況，可以使用switch...case來改寫，這樣代碼看起來更有調(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
對于上面的代碼，可以使用對象來繼續(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 來實(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)
來看下面的代碼：
function check(flower, quantity) {
if (!flower) return;
const num = quantity || 1;
return `${num}朵${flower}`;
}
check('玫瑰'); // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉可以使用函數(shù)默認(rèn)參數(shù)來簡化上面的代碼：
function check(flower, quantity = 1) {
if (!flower) return;
return `${quantity}朵${flower}`;
}
check('玫瑰'); // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉那如果flower參數(shù)是一個(gè)對象怎么辦呢？來看下面的代碼：
function check(flower) {
if (flower && flower.name) {
console.log(flower.name);
} else {
console.log('unknown');
}
}
check(undefined); // unknown
check({}); // unknown
check({ name: '玫瑰', color: 'red' }); // 玫瑰可以從對象中解構(gòu)需要的屬性：
function check({name} = {}) {
console.log (name || 'unknown');
}
check(undefined); // unknown
check({}); // unknown
check({ name: '玫瑰', color: 'red' }); // 玫瑰在函數(shù)中需要flower?對象中的name?屬性，可以使用{name}?來解構(gòu)該參數(shù)。除此之外，還可以用{}?來作為參數(shù)的默認(rèn)值，這樣在check(undefined)?時(shí)，也就是參數(shù)不是對象時(shí)，參數(shù)默認(rèn)為一個(gè)空對象，否則就會(huì)報(bào)錯(cuò)，因?yàn)閡ndefined?中沒有name屬性。
8、邏輯與運(yùn)算符
來看下面的代碼：
if(a < 0 && b > 100 && c === 10) {
fn()
}對于邏輯與運(yùn)算符，其左側(cè)的條件如果為false?，就會(huì)直接發(fā)生短路，不再繼續(xù)往后執(zhí)行；如果左側(cè)的條件為true?，就會(huì)返回其右側(cè)的計(jì)算結(jié)果。所以，對于這種 if 中只有一行表達(dá)式的情況，可以使用邏輯與運(yùn)算符來簡化，其中左側(cè)為判斷條件，右側(cè)是要執(zhí)行的邏輯：
(a < 0 && b > 100 && c === 10) && fn();
參考：
- https://www.digitalocean.com/community/posts/5-tips-to-write-better-conditionals-in-javascript。
- https://www.geeksforgeeks.org/tips-for-writing-better-conditionals-in-javascript。
網(wǎng)站名稱：JavaScript 條件語句優(yōu)化小技巧
分享URL：http://www.dlmjj.cn/article/dheehsc.html
