您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript條件語(yǔ)句優(yōu)化的技巧有哪些的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇JavaScript條件語(yǔ)句優(yōu)化的技巧有哪些文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
來(lái)看下面的代碼:
function test(animal) { if (animal == 'lion' || animal == 'dog') { return animal; } return ''; } test('dog');
在test方法中包含一個(gè) if 語(yǔ)句,用來(lái)判斷傳入的參數(shù)animal是不是lion或者dog。這么寫(xiě)從語(yǔ)法上是沒(méi)問(wèn)題的,但是如果 if 的判斷條件中不只有兩個(gè)動(dòng)物,而是有四只動(dòng)物。如果繼續(xù)使用 || 與運(yùn)算符來(lái)寫(xiě)的話,代碼就會(huì)很難維護(hù)并且看起來(lái)非常不優(yōu)雅:
if (animal == 'lion' || animal == 'dog' || animal == 'cow' || animal == 'cat') { return animal; }
對(duì)于這種需要對(duì)同一個(gè)變量進(jìn)行多次判斷的條件語(yǔ)句,可以使用數(shù)組的 includes()
方法來(lái)優(yōu)化,該方法可以用于確定數(shù)組中是否存在指定元素,如果存在指定的元素,就會(huì)返回 true
,如果不存在就會(huì)返回 false
。使用 includes()
來(lái)修改寫(xiě)上面的代碼:
if (['dog', 'cat', 'cow', 'lion'].includes(animal)) { return animal; }
這樣代碼看起來(lái)就簡(jiǎn)潔了很多,并且如果想繼續(xù)增加其他的動(dòng)物,只需在數(shù)組中繼續(xù)增加元素即可。
來(lái)看下面的代碼:
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。可以使用該方法來(lái)優(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);
在 JavaScript 中,盡早 return 是一種將函數(shù)體減少else語(yǔ)句的簡(jiǎn)單方法。來(lái)看下面的代碼:
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
來(lái)使用這種模式來(lái)優(yōu)化上面的代碼,可以在無(wú)效條件時(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語(yǔ)句,使得函數(shù)更加清晰和簡(jiǎn)潔。
對(duì)于上面例子中的函數(shù),可以使用 JavaScript 的三元運(yùn)算符來(lái)重構(gòu):
function IsRed(someObject) { return typeof someObject !== 'object' || someObject.color !== 'Red' ? false : true; }
對(duì)于上面的三元表達(dá)式,還可以進(jìn)行簡(jiǎn)化:
function IsRed(someObject) { return !(typeof someObject !== 'object' || someObject.color !== 'Red'); }
對(duì)于這種if...else塊中都分別只有一個(gè)表達(dá)式的情況,就可以使用三元表達(dá)式來(lái)簡(jiǎn)化if...else語(yǔ)句。
來(lái)看下面的代碼:
function printCars(color) { if (color === 'red') { return ['Rcar1', 'Rcar2']; } else if (color === 'blue') { return ['Bcar1', 'Bcar2']; } else if (color === 'purple') { return ['Pcar1', 'Pcar2']; } return []; }
對(duì)于這種if的判斷條件中都是針對(duì)一個(gè)變量進(jìn)行判斷的情況,可以使用switch...case來(lái)改寫(xiě),這樣代碼看起來(lái)更有調(diào)理:
function printCars(color) { switch (color) { case 'red': return ['Rcar1', 'Rcar2']; case 'blue': return ['Bcar1', 'Bcar2']; case 'purple': return ['Pcar1', 'Pcar2']; default: return []; } }
對(duì)于上面的代碼,可以使用對(duì)象來(lái)繼續(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 來(lái)實(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']
來(lái)看下面的代碼:
function check(flower, quantity) { if (!flower) return; const num = quantity || 1; return `${num}朵${flower}`; } check('玫瑰'); // 1朵玫瑰 check('茉莉', 2); // 2朵茉莉
可以使用函數(shù)默認(rèn)參數(shù)來(lái)簡(jiǎn)化上面的代碼:
function check(flower, quantity = 1) { if (!flower) return; return `${quantity}朵${flower}`; } check('玫瑰'); // 1朵玫瑰 check('茉莉', 2); // 2朵茉莉
那如果flower參數(shù)是一個(gè)對(duì)象怎么辦呢?來(lái)看下面的代碼:
function check(flower) { if (flower && flower.name) { console.log(flower.name); } else { console.log('unknown'); } } check(undefined); // unknown check({}); // unknown check({ name: '玫瑰', color: 'red' }); // 玫瑰
可以從對(duì)象中解構(gòu)需要的屬性:
function check({name} = {}) { console.log (name || 'unknown'); } check(undefined); // unknown check({}); // unknown check({ name: '玫瑰', color: 'red' }); // 玫瑰
在函數(shù)中需要flower對(duì)象中的name屬性,可以使用{name}來(lái)解構(gòu)該參數(shù)。除此之外,還可以用{}來(lái)作為參數(shù)的默認(rèn)值,這樣在check(undefined)時(shí),也就是參數(shù)不是對(duì)象時(shí),參數(shù)默認(rèn)為一個(gè)空對(duì)象,否則就會(huì)報(bào)錯(cuò),因?yàn)閡ndefined中沒(méi)有name屬性。
來(lái)看下面的代碼:
if(a < 0 && b > 100 && c === 10) { fn() }
對(duì)于邏輯與運(yùn)算符,其左側(cè)的條件如果為false,就會(huì)直接發(fā)生短路,不再繼續(xù)往后執(zhí)行;如果左側(cè)的條件為true,就會(huì)返回其右側(cè)的計(jì)算結(jié)果。所以,對(duì)于這種 if 中只有一行表達(dá)式的情況,可以使用邏輯與運(yùn)算符來(lái)簡(jiǎn)化,其中左側(cè)為判斷條件,右側(cè)是要執(zhí)行的邏輯:
(a < 0 && b > 100 && c === 10) && fn();
關(guān)于“JavaScript條件語(yǔ)句優(yōu)化的技巧有哪些”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“JavaScript條件語(yǔ)句優(yōu)化的技巧有哪些”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。