您现在的位置是:群英 > 开发技术 > web开发
foreach和for在JS中foreach的用法上的区别在哪
Admin发表于 2022-05-26 17:09:45646 次浏览
在实际案例的操作过程中,我们可能会遇到“foreach和for在JS中foreach的用法上的区别在哪”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。


一、定义和用法

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);

2.运用的场景(给原始数组新增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 跳出循环

1.foreach 跳出当前的循环 return

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

2.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))

3.foreach 与for循环的区别 【面试题】

1==> for可以用continue跳过当前循环中的一个迭代,foreach 用continue会报错。但是可以使用return来跳出当前的循环
2==> for可以使用break来跳出整个循环,foreach正常情况无法跳出整个循环。
如果面试官问:如果非要跳出foreach中的循环,可以抛出一个异常来处理



到此这篇关于“foreach和for在JS中foreach的用法上的区别在哪”的文章就介绍到这了,感谢各位的阅读,更多相关foreach和for在JS中foreach的用法上的区别在哪内容,欢迎关注群英网络资讯频道,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-07-06 17:52:25 
摘要:这篇文章主要为大家介绍了Go语言教程关于GC垃圾回收三色标记的示例详解,本篇文章是Go语言七篇入门教程系列文章,有需要的朋友可以借鉴参考下,希望能够有所帮助
2022-06-18 17:06:24 
摘要:在前面已经演示了nginx的安装以及常用命令,这一章节重点讲解nginx的配置文件。1. nginx配置文件路径:不同安装方式,nginx的文件存放路径也有所不同。源码编译安装方式:在安装目录下的co
2022-09-16 17:55:42 
摘要:在vue2中,v-for的优先级高于v-if;在vue3中,v-if的优先级高于v-for。在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费(每次渲染都会先循环再进行条件判断);想要避免出现这种情况,可在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部