JavaScript中 forEach map 方法 无法跳出循环问题及解决方案

简介: JavaScript中 forEach map 方法 无法跳出循环问题及解决方案

1.1 forEach() 方法

定义和用法: forEach() 方法按顺序为数组中的每个元素调用一次函数。

注意: 对于没有值的数组元素,不执行forEach() 方法。

语法:

array.forEach(function(currentValue, index, arr), thisValue)

问题1:使用 return 不退出循环

const arr = [1,2,3,4,5];
const test = 3;
arr.forEach((item) => {
  if(item == test){
  return item
  }
  console.log(item);
})

2020062310470442.png

问题2:使用 break 报错

const arr = [1,2,3,4,5];
const test = 3;
arr.forEach((item) => {
  if(item == test){
  break
  }
  console.log(item);
})

2020062310470442.png

1.2 map() 方法

定义和用法:

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测,不会改变原始数组。

语法:

array.map(function(currentValue,index,arr), thisValue)

问题1:使用 return 不退出循环

const arr = [1,2,3,4,5];
const test = 3;
arr.map((item) => {
  if(item == test){
  return 
  }
  console.log(item);
})

2020062310470442.png

问题2:使用 break 报错

const arr = [1,2,3,4,5];
const test = 3;
arr.map((item) => {
  if(item == test){
  break
  }
  console.log(item);
})

2020062310470442.png

2. 解决方案

2.1 使用 for 循环

注意: return 只能出现在函数体中,也就是 function 中 或 {} 中 。直接写在循环中会报错 Uncaught SyntaxError: Illegal return statement。

const arr = [1,2,3,4,5];
const count = 3;
function test(){
  for(let i = 0; i < arr.length; i++){
  if(arr[i] == count){        
     return arr[i]
  }
  } 
}
console.log(test())

2020062310470442.png

2.2 使用 some () 方法,当内部 return true 时跳出整个循环

const arr = [1,2,3,4,5];
const test = 3;
arr.some((item) => {
  if(item == test){
  return item;     // 返回值为true,并跳出循环
  }
  console.log(item);
})

2020062310470442.png

2.3 使用 every() 方法 : 当内部 return false 时跳出整个循环(需要写 return true )

const arr = [1,2,3,4,5];
const test = 3;
arr.every((item) => {
  if(item == test){
  return false;    
  }else{
    console.log(item);
    return true;
  } 
})

2020062310470442.png

传送门:JavaScript中 数组迭代(遍历)的几种方法

相关文章
|
12月前
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
1163 0
|
4月前
|
存储 JavaScript 前端开发
for...of循环在遍历Set和Map时的注意事项有哪些?
for...of循环在遍历Set和Map时的注意事项有哪些?
265 121
|
12月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2052 1
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
11月前
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
144 32
|
11月前
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
110 3
|
11月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
11月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
89 2