js中forEach的用法、forEach如何跳出循环、forEach与for之间的区别

简介: js中forEach的用法、forEach如何跳出循环、forEach与for之间的区别

定义和用法


forEach() 调用数组的每个元素,并将元素传递给回调函数。


注意: forEach() 对于空数组是不会执行回调函数的。


用法:


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


1==> currentValue 必需。当前元素


2==> index 可选。当前元素的索引值,是数字类型的


3==> arr 可选。当前元素所属的数组对象


4==> 可选。传递给函数的值一般用 "this" 值。


如果这个参数为空, "undefined" 会传递给 "this" 值


forEach 的注意点


forEach() 本身是不支持的 continue 与 break 语句的。


我们可以通 return 语句实现 continue 关键字的效果:


运用的场景(计算数字之和)


1.计算数组所有元素相加的总和:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
arr.forEach((currentIndex, index, curArr) => {
    sum += currentIndex
        // sum=sum+currentIndex
})
console.log('之和是', sum);


运用的场景(给原始数组新增key值)


//给原始数组的每一项新增一个属性值
let arr = [{
  id: '001',
  name: '张三1'
}, {
  id: '002',
  name: '张三2'
}, {
  id: '003',
  name: '张三2'
}];
//给原始数组的每一项新增一个属性值
arr.forEach((item, index) => {
  item['addAttrs'] = ''
})
console.log('arr', arr);
--使用for of来出处理--
for (let item of arr) {
    item['index'] = ''
}
console.log('arr', arr);


forEach 跳出当前的循环 return


//内容为3,不遍历该项
var arr = [1, 2, 3];
arr.forEach(function(item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});


forEach结合try跳出整个循环


//找到id为002,然后终止整个循环,返回当前这一项的值。
//使用 try-catch完成的
代码如下
let arr = [{
  id: '001',
  name: '张三1'
}, {
  id: '002',
  name: '张三2'
}, {
  id: '003',
  name: '张三2'
}];
// 使用forEach跳出整个循环,使用rty-catch
function useForeach(Arr) {
  let obj = {}
  try {
    Arr.forEach(function(item) {
      if (item.id == '002') {
        // 找到目标项,赋值。然后抛出异常
        obj = item
        throw new Error('return false')
      }
    });
  } catch (e) {
    // 返回id===002的这一项的数据
    return obj
  }
}
console.log(useForeach(arr))


forEach 与for循环的区别 【面试题】


1==> for可以用continue跳过当前循环中的一个迭代,forEach 用continue会报错。但是可以使用return来跳出当前的循环


2==> for可以使用break来跳出整个循环,forEach正常情况无法跳出整个循环。

如果面试官问:如果非要跳出forEach中的循环,可以抛出一个异常来处理

相关文章
|
1天前
|
JavaScript 前端开发 Oracle
java和JavaScript的区别
java和JavaScript的区别
6 3
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
3天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
3天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
13 0
|
4天前
|
JavaScript 索引
JS 几种循环遍历
JS 几种循环遍历
8 0
JS 几种循环遍历
|
7天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
11天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
14天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
13 0
|
14天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
21 1
|
17天前
|
JavaScript 前端开发 算法
JavaScript 中前置自增与后置自增:区别、应用场景
【4月更文挑战第6天】JavaScript中的前置自增`++a`先增后用,返回新值,适合复合赋值和循环计数;后置自增`a++`先用后增,返回原值,适用于保留变量原值的操作。二者差异在于运算时机和返回值,选择时要考虑递增时机和表达式中使用的值。在复杂表达式中应避免混用,注重代码清晰度和一致性。理解这些差异能提高代码效率,避免逻辑错误。
18 1