[TOC] #### 1. for 結束循環 --- 眾所周知，在 for 循環語句中，遇到 break 會結束循環。但是如何在數組方法 `array.forEach()` 中如何結束循環呢 ？ ```javascript const arr = ['html', 'css', 'js', 'vue', 'php'] for (let i = 0; i < arr.length; i++) { // 第一次循環輸出: html // 第二次循環輸出: css // 第三次循環輸出: js console.log(arr[i]); // 第三次循環時，條件成立，停止循環 if (arr[i] == 'js') break; } ``` #### 2. forEach 結束循環 --- forEach 本身無法跳出循環，但是我們可以通過系統的一些強制性方法使其結束循環，如下所示： ```javascript try { arr.forEach(item => { if (item == 'js') throw new Error('結束循環'); }) } catch (error) { console.log(error.message); } ``` 上面寫法存在問題，當循環中有一些其他異常時，理應拋出異常，而不是認為是結束循環的異常。改進后： ```javascript try { arr.forEach(item => { console.log(item); if (item == 'css') item + a; // a is not defined if (item == 'js') throw new Error('結束循環'); }) } catch (error) { if (error.message !== '結束循環') { throw error; } } ``` #### 3. 利用高階函數進行循環 --- Array.some() 方法用于檢測數組中的元素是否滿足指定條件，有一個滿足就停止循環，然后返回 true 也就是閉包函數的返回值為 true 時，停止循環。利用這一特性，可以控制循環中何時返回 true，進行控制何時結束循環 ```javascript const arr = ['html', 'css', 'js', 'vue', 'php'] arr.some(item => { // 循環三次，依次輸出 html css js console.log(item); if (item == 'js') { return true } }) ``` Array.every() 方法用于檢測數組中的所有元素是否滿足指定條件，有一個不滿足就停止循環，然后返回 false 同理，通過控制返回值，一樣能控制何時結束循環 ```javascript const arr = ['html', 'css', 'js', 'vue', 'php'] arr.every(item => { // 循環三次，依次輸出 html css js console.log(item); if (item == 'js') { return false } return true }) ``` #### 4. 開發中到底應該使用哪種方式 --- 開發中，遇到需要循環一個數組，并且當循環到某一個元素時要跳出循環，建議書寫方式如下所示： ```javascript const arr = ['html', 'css', 'js', 'vue', 'php'] // 推薦方式一 for (let i = 0; i < arr.length; i++) { if (arr[i] == 'js') { break; } } // 推薦方式二 arr.some(item => { if (item == 'js') { return true } }) ```