使用 Array.includes 來處理多重條件

// 條件語句 function test(fruit) {if (fruit == 'apple' || fruit == 'strawberry') {console.log('red');} }

如果我們想要匹配更多的紅色水果呢，比方說『櫻桃』和『蔓越莓』？我們是不是得用更多的 || 來擴展這條語句？

function test(fruit) {// 把條件提取到數(shù)組中const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];if (redFruits.includes(fruit)) {console.log('red');} }

---

少寫嵌套，盡早返回

讓我們?yōu)橹暗睦犹砑觾蓚€條件：

如果沒有提供水果，拋出錯誤。
如果該水果的數(shù)量大于 10，將其打印出來。

function test(fruit, quantity) {const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];// 條件 1：fruit 必須有值if (fruit) {// 條件 2：必須為紅色if (redFruits.includes(fruit)) {console.log('red');// 條件 3：必須是大量存在if (quantity > 10) {console.log('big quantity');}}} else {throw new Error('No fruit!');} }// 測試結果 test(null); // 報錯：No fruits test('apple'); // 打印：red test('apple', 20); // 打印：red，big quantity

讓我們來仔細看看上面的代碼，我們有：

1 個 if/else 語句來篩選無效的條件
3 層 if 語句嵌套（條件 1，2 & 3）
就我個人而言，我遵循的一個總的規(guī)則是當發(fā)現(xiàn)無效條件時盡早返回。
/_ 當發(fā)現(xiàn)無效條件時盡早返回 _/

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

---

使用函數(shù)默認參數(shù)和解構

function test(fruit, quantity) {if (!fruit) return;const q = quantity || 1; // 如果沒有提供 quantity，默認為 1console.log(`We have ${q} ${fruit}!`); }//測試結果 test('banana'); // We have 1 banana! test('apple', 2); // We have 2 apple!

事實上，我們可以通過函數(shù)的默認參數(shù)來去掉變量 q

function test(fruit, quantity = 1) { // 如果沒有提供 quantity，默認為 1if (!fruit) return;console.log(`We have ${quantity} ${fruit}!`); }//測試結果 test('banana'); // We have 1 banana! test('apple', 2); // We have 2 apple!

---

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

讓我們看下面的例子，我們想要根據(jù)顏色打印出各種水果：

function test(color) {// 使用 switch case 來找到對應顏色的水果switch (color) {case 'red':return ['apple', 'strawberry'];case 'yellow':return ['banana', 'pineapple'];case 'purple':return ['grape', 'plum'];default:return [];} }//測試結果 test(null); // [] test('yellow'); // ['banana', 'pineapple']

同樣的結果可以通過使用 Map 來實現(xiàn)同樣的效果:

// 使用 Map 來找到對應顏色的水果const fruitColor = new Map().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum']);function test(color) {return fruitColor.get(color) || []; }

---

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

JavaScript 數(shù)組函數(shù)來減少代碼行數(shù)。觀察以下的代碼，我們想要檢查是否所有的水果都是紅色的：

const fruits = [{ name: 'apple', color: 'red' },{ name: 'banana', color: 'yellow' },{ name: 'grape', color: 'purple' }];function test() {let isAllRed = true;// 條件：所有的水果都必須是紅色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() {// 條件：（簡短形式）所有的水果都必須是紅色const isAllRed = fruits.every(f => f.color == 'red');console.log(isAllRed); // false }

備注自己看：（數(shù)組遍歷 for、forEach 、map、filter、reduce、every、some）
要檢查是否有至少一個水果是紅色的，我們可以使用 Array.some 僅用一行代碼就實現(xiàn)出來。

const fruits = [{ name: 'apple', color: 'red' },{ name: 'banana', color: 'yellow' },{ name: 'grape', color: 'purple' } ];function test() {// 條件：至少一個水果是紅色的const isAnyRed = fruits.some(f => f.color == 'red');console.log(isAnyRed); // true }

總結

以上是生活随笔為你收集整理的前端开发几个小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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