JS中map與forEach無法跳出循環(huán)及every和some的使用
前言
在項(xiàng)目中遍歷數(shù)組的時候,使用到了array.map
在循環(huán)里面需要進(jìn)行判斷,只要有一項(xiàng)滿足條件就返回false
發(fā)現(xiàn)效果不對,debug一下才發(fā)現(xiàn),return沒有真正退出循環(huán)。
下面探索一下正確的跳出循環(huán)方案~~
1.map
使用return不能跳出循環(huán)
let arr = [1,2,3]; arr.map((item)=>{ if(item == 2){ return false } console.log(item) })
使用break報(bào)錯
let arr = [1,2,3]; arr.map((item)=>{ if(item == 2){ break; } console.log(item) })
2.forEach
使用return不能跳出循環(huán)
let arr = [1,2,3]; arr.forEach((item)=>{ if(item == 2){ return false } console.log(item) })
使用break報(bào)錯
let arr = [1,2,3]; arr.forEach((item)=>{ if(item == 2){ break; } console.log(item) })
3.every方法
判斷數(shù)組中是否所有元素都滿足條件
every()方法會遍歷數(shù)組的每一項(xiàng),如果有有一項(xiàng)不滿足條件,則表達(dá)式返回false,剩余的項(xiàng)將不會再執(zhí)行檢測;如果遍歷完數(shù)組后,每一項(xiàng)都符合條件,則返回true。
return true : 循環(huán)繼續(xù) 當(dāng)前元素滿足條件,繼續(xù)判斷,如果循環(huán)執(zhí)行完畢還是true,則every的返回值就是true
return false : 循環(huán)結(jié)束,當(dāng)前元素不滿足條件,every的返回值也是false
let arr = [1,2,3]; arr.every((item)=>{ if(item == 2){ return false } console.log(item) })
4.some方法
判斷數(shù)組中是否有滿足條件的元素
return true : 循環(huán)結(jié)束,找到了滿足條件的元素
return false : 循環(huán)繼續(xù),沒找到循環(huán)繼續(xù),如果所有元素全部遍歷還是沒找到,最終結(jié)果為false
let arr = [1,2,3]; arr.some((item)=>{ if(item == 2){ return true } console.log(item) })
5.for循環(huán)使用return 和 break 都可以跳出循環(huán)
單層循環(huán)
1.for循環(huán)中return語句:會直接跳出循環(huán),
因?yàn)閖s中for是沒有局部作用域的概念的,所以只有把for循環(huán)放在函數(shù)中時,才可以在for循環(huán)中使用return語句。
2.for循環(huán)中的break語句:和return一樣會直接跳出循環(huán)
與return不同的是,使用break時,for循環(huán)可以不用一定放在函數(shù)中 ;
多層循環(huán):
1.return:和單層循環(huán)一樣必須放在函數(shù)中,否則將會報(bào)語法錯誤
使用return會直接跳出函數(shù)
var a=[1,2,3]; var b=[4,5,6,7,8]; function test(){ for(var i=0;i<a.length;i++){ for(var j=0;j<b.length;j++){ if(b[j]==5){ // break return; }else{ console.log(13); } } console.log(12); } console.log(14); } test();//打印結(jié)果為:13
使用return后,當(dāng)b[j]=5的時候,會直接跳出函數(shù),for循環(huán)后面的語句也不再執(zhí)行;
2.break語句:和單層循環(huán)一樣,可以可以不用放在函數(shù)中
但是在多層循環(huán)中與return不同的是,break不是跳出函數(shù),而是跳出最里層的for循環(huán),外面的循環(huán)和最外層for循環(huán)后面的語句也將繼續(xù)執(zhí)行
var a=[1,2,3]; var b=[4,5,6,7,8]; function test(){ for(var i=0;i<a.length;i++){ for(var j=0;j<b.length;j++){ if(b[j]==5){ break ; // return; }else{ console.log(13); } } console.log(12); } console.log(14); } test();//打印結(jié)果為13 12 13 12 13 12 14
總結(jié)
到此這篇關(guān)于JS中map與forEach無法跳出循環(huán)及every和some的使用的文章就介紹到這了,更多相關(guān)JS map與forEach無法跳出循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 定義初始化數(shù)組函數(shù)
有段javascript代碼很困惑,經(jīng)過不斷的查資料,終于弄懂了!呵呵!2009-09-09extract-text-webpack-plugin用法詳解
這篇文章主要介紹了extract-text-webpack-plugin用法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能,涉及微信小程序wx.request訪問php后臺及返回結(jié)果的顯示布局相關(guān)操作技巧,需要的朋友可以參考下2019-05-05JS正則表達(dá)式修飾符中multiline(/m)用法分析
這篇文章主要介紹了JS正則表達(dá)式修飾符中multiline(/m)用法,結(jié)合實(shí)例形式分析了JS正則中多行模式multiline的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12javascript 數(shù)據(jù)存儲的常用函數(shù)總結(jié)
這篇文章主要介紹了javascript 數(shù)據(jù)存儲的常用函數(shù)總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-06-06JavaScript實(shí)現(xiàn)簡易的天數(shù)計(jì)算器實(shí)例【附demo源碼下載】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡易的天數(shù)計(jì)算器,結(jié)合實(shí)例形式分析了javascript日期與時間計(jì)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01