一、條件語句

? ? ???1，使用 Array.includes 來處理多重 || 條件? ? ? ? ?

// ----- 一般 ------if (fruit == 'apple' || fruit == 'strawberry' || fruit == 'banana' ) {console.log('red');}//------- 優雅 ------// 把條件提取到數組中const redFruits = ['apple', 'strawberry', 'banana', 'cranberries']; if (redFruits.includes(fruit)) { console.log('red'); }

? ? ? ?

? ? ? ? 2，少寫嵌套，無效條件盡早返回

/_ 當發現無效條件時盡早返回 _/ function test(fruit, quantity) {const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];if (!fruit) thrownewError('No fruit!'); // 條件 1：盡早拋出錯誤if (!redFruits.includes(fruit)) return; // 條件 2：當 fruit 不是紅色的時候，直接返回console.log('red');// 條件 3：必須是大量存在if (quantity > 10) {console.log('big quantity');} }

? ? ?

? ? ? 3，使用函數默認參數和解構

// ------- 默認參數 一般 -------function test(fruit, quantity) {if (!fruit) return;const q = quantity || 1; // 如果沒有提供 quantity，默認為 1console.log(`We have ${q}${fruit}!`); }// ------- 默認參數 優雅 -------function test(fruit, quantity = 1) { // 如果沒有提供 quantity，默認為 1if (!fruit) return;console.log(`We have ${quantity}${fruit}!`); }// ------- 解構 一般 -------function test(fruit) { // 如果有值，則打印出來if (fruit && fruit.name) {console.log (fruit.name);} else {console.log('unknown');} }// ------- 解構 優雅 -------// 解構 —— 只得到 name 屬性// 默認參數為空對象 {}function test({name} = {}) {console.log (name || 'unknown');}

? ? ?

? ? ? 4，相較于 switch，Map / Object 也許是更好的選擇

//------ switch 一般 ---------function test(color) {// 使用 switch case 來找到對應顏色的水果switch (color) {case 'red':return ['apple', 'strawberry'];case 'yellow':return ['banana', 'pineapple'];case 'purple':return ['grape', 'plum'];default:return [];} }// ----- Object 優雅 -----// 使用對象字面量來找到對應顏色的水果const fruitColor = {red: ['apple', 'strawberry'],yellow: ['banana', 'pineapple'],purple: ['grape', 'plum']};function test(color) {return fruitColor[color] || [];}// ----- Map 優雅 -----// 使用 Map 來找到對應顏色的水果const fruitColor = newMap().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum']);function test(color) {return fruitColor.get(color) || [];}// ----- 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) {// 使用 Array filter 來找到對應顏色的水果return fruits.filter(f => f.color == color); }

?

? ??? 5，使用 Array.every 和 Array.some 來處理全部/部分滿足條件

// ------- 直接優雅 -------- const fruits = [{ name: 'apple', color: 'red' },{ name: 'banana', color: 'yellow' },{ name: 'grape', color: 'purple' }]; function test() {// 條件：（簡短形式）所有的水果都必須是紅色const isAllRed = fruits.every(f => f.color == 'red');// 條件：至少一個水果是紅色的const isAnyRed = fruits.some(f => f.color == 'red');console.log(isAllRed); // false } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js 进阶篇 代码等级提升的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。