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中 数组迭代(遍历)的几种方法

相关文章
|
15天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
14天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
14天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
8天前
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
46 32
|
8天前
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
14 3
|
14天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
30 7
|
14天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2