在日常工作中經常遇到需要跳出當前循環的場景，但是每次查詢過後沒多久就忘記了，循環時也是使用map一把梭，趁著休息，在這裡總結一下js中的循環方法以及如何跳出當前循環。
本文略去了一些方法的傳入參數以及返回參數，做了一些精簡，如果需要詳細了解方法的使用可以去MDN上詳細查詢。
for循環
基本結構：for(表達式一;表達式二;表達式三){}表達式一 用來定義變量表達式二 用來判斷循環是否結束表達式三 每次循環都要執行的表達式{} 代碼塊
常規用法
for(let i=1;i<5;i++){console.log(i)}輸出：1234
省略表達式一
let i =1;for(;i<5;i++){console.log(i)}輸出：1234
省略表達式二
for (let i = 1;; i++) {if (i == 3) {break;}console.log(i)}輸出：12
省略代碼塊
let i = 1;for(;i<3;i++);console.log(i);輸出：2
跳出循環
continue跳出本次循環
for(let i=1;i<5;i++){if(i===2){continue;}console.log(i)}輸出134
跳出所有：
return跳出所有循環
function test(){for(let i=1;i<5;i++){if(i===2){return}console.log(i)}}test()輸出：1
return 必須出現在函數體內，否則會出現語法錯誤：Uncaught SyntaxError: Illegal return statement
break跳出所有循環
for(let i=1;i<5;i++){if(i===2){break;}console.log(i)}輸出：1
for in
一般用來遍歷對象的屬性，不建議用來遍歷數組
let obj = {name:'小明',sex:'男',adress:'中國'};function Parent(){this.age = 11;}Parent.prototype = obj;let son = new Parent();for(let key in son){console.log(key)}輸出：namesexadressage
遍歷對象時會連同繼承來的屬性一併循環出來，如果只需要遍歷自身屬性，則需要使用hasOwnProperty方法
let obj = {name:'小明',sex:'男',adress:'中國'};function Parent(){this.age = 11;}Parent.prototype = obj;let son = new Parent();for(let key in son){if(son.hasOwnProperty(key)){console.log(key)}}輸出age
跳出循環：
continue跳出本次循環
let obj = {name:'小明',sex:'男',adress:'中國'};functiontest(){for(let key in obj){if(key == 'sex'){continue}console.log(key)}}test()輸出：nameadress
break跳出所有循環
let obj = {name:'小明',sex:'男',adress:'中國'};for(letkey in obj){if(key == 'sex'){break}console.log(key)}let obj = {name:'小明',sex:'男',adress:'中國'};function test(){for(let key in obj){if(key == 'sex'){return}console.log(key)}}test()
return跳出所有循環
let obj = {name:'小明',sex:'男',adress:'中國'};console.log("開始循環")function test(){for (let key in obj) {console.log(key)return;}}test();console.log("結束循環")輸出：name
return 必須出現在函數體內，否則會出現語法錯誤：Uncaught SyntaxError: Illegal return statement
for of
一般用在可迭代對象上
let arr = ['a','b','c'];for(let value of arr){console.log(value)}輸出：abc
跳出循環
break跳出
let arr = ['a','b','c'];console.log("開始循環")for(let value of arr){console.log(value)break;}console.log("結束循環")輸出開始循環a結束循環
return跳出
let arr = ['a', 'b', 'c'];console.log("開始循環")function test(){for (let value of arr) {console.log(value)return;}}test();console.log("結束循環")
return 必須出現在函數體內，否則會出現語法錯誤：Uncaught SyntaxError: Illegal return statement
continue跳出本次循環
let arr = ['a','b','c']functiontest(){for(let value of arr){if(value == 'b'){continue}console.log(value)}}test()輸出ac
forEach 循環
無返回值
forEach 第一次執行回調時就確定了數組的範圍，循環時新增的值並不會被循環到
let arr = ['a','b','c','d'];arr.forEach((item,index)=>{if(item == 'b'){arr.push('E')}console.log(item)})輸出：abcd
如果在循環中更改了已存在的值，則傳遞給回調的值是遍歷到值的那刻的值
let arr = ['a','b','c','d'];arr.forEach((item,index)=>{if(item == 'b'){arr[2] = 'C';}console.log(item)})輸出：abCd
如果循環中刪除數組中的某項值，傳遞給forEach中的數組為刪除數據後的數組
let arr = ['a','b','c','d'];arr.forEach((item,index)=>{if(item == 'b'){arr.splice(3,1)}console.log(item,index)})輸出：a 0b 1c 2
forEach 只能通過拋出異常來結束循環，如果需要跳出循環建議使用for in、for of、 for、 every 、some 、 find等函數
map
返回值為return後組成的新數組
循環中刪除元素後下次循環接收到的新數組為刪除元素後的數組，當循環到第2個元素時刪除掉第三個元素，循環第三個元素時數組為[20,30,40],index為2，所以輸出40,2，循環完畢後輸出[20,30,40]
let array = [10,20,30,40];array.map((item,index,arr)=>{if(item==20){arr.splice(0,1);}console.log(item,index);});console.log(array);輸出：10 020 140 2[20,30,40]
every
當回調函數返回true時繼續執行循環，當返回false時跳出循環
let arr = [10,20,30,40];arr.every((item,index)=>{console.log(item)return true})輸出：10203040
當空數組調用時，總會返回true
console.log([].every(() => {return false}))輸出：true
跳出循環
let arr = [10,20,30,40];arr.every((item,index)=>{console.log(item)if(item==20){return false}return true})輸出：1020
some
當回調函數返回false時繼續執行循環，當返回true時跳出循環
跳出循環
let arr = [10, 20, 30, 40];arr.some((item, index) => {console.log(item)return false})輸出：10
當空數組調用時，總會返回false
console.log([].some(() => {return true}))輸出：false
filter
返回一個由通過的元素組成的數組
let arr = [1,2,3,4,5]let newArr = arr.filter((item,index)=>{return item>2})console.log(newArr)輸出：345
總結：
循環時需要跳出
for 、for in 、for of 、some 、every
返回新數組
map 、filter 、some 、every