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