js中forEach的用法之forEach与for之间的区别

目录
  • 一、定义和用法
  • 二、运用场景
    • 1.运用的场景(计算数字之和)
    • 2.运用的场景(给原始数组新增key值)
  • 三、forEach 跳出循环
    • 1.forEach 跳出当前的循环 return
    • 2.forEach结合try跳出整个循环
    • 3.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);

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中的循环，可以抛出一个异常来处理

到此这篇关于js中forEach的用法之forEach与for之间的区别的文章就介绍到这了,更多相关js forEach与fo的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS forEach和map方法的用法与区别分析

    本文实例讲述了JS forEach和map方法的用法与区别.分享给大家供大家参考,具体如下: 一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似.但是从本质上还是有很大的区别的,那么我们探探究竟. 二.forEach和map语法 2.1.语法: //forEach array.forEach(callba

  • JS中for,for...in,for...of和forEach的区别和用法实例

    for循环 基本语法格式: for(初始化变量;条件表达式;操作表达式){              循环体语句;     } 普通for循环在Array和Object中都可以使用.for循环中可以使用return.break等来中断循环. //遍历数组 var arr = [1,2,3,4,5]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } //遍历对象 var obj={ x0:10, x1:20, x2:30 } for(va

  • js中forEach的用法之forEach与for之间的区别

    目录 一.定义和用法 二.运用场景 1.运用的场景(计算数字之和) 2.运用的场景(给原始数组新增key值) 三.forEach 跳出循环 1.forEach 跳出当前的循环 return 2.forEach结合try跳出整个循环 3.forEach 与for循环的区别 [面试题] 一.定义和用法 forEach() 调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. 用法: array.forEach(function(currentVa

  • 详谈js中标准for循环与foreach(for in)的区别

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为

  • js中this的用法实例分析

    本文实例分析了js中this的用法.分享给大家供大家参考.具体分析如下: 实例1:第一种调用this的方法--以函数形式调用.它代表全局对象window 复制代码 代码如下: <script type="text/javascript"> function t(){  alert(this);//这里this表示window对象. } t(); </script> 实例2:第二种调用this的方法--以对象属性的形式调用.它代表该对象.实例中onclick为p元

  • 深入理解js中this的用法

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 1.纯粹函数调用. function test() { this.x = 1; alert(x); } test(); 其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global.其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global. var x = 1; function test()

  • 实例讲解JS中setTimeout()的用法

    实例讲解JS中setTimeout()的用法

    本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&

  • JS中Attr的用法详解

    具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert(

  • JS中prototype的用法实例分析

    本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A.   2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子如下: function People(name

  • 浅谈Vue.js中ref ($refs)用法举例总结

    本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

  • JS中使用正则表达式g模式和非g模式的区别

    先给大家说下js正则表达式中的g到底是什么意思 g是global的缩写啊! 就是匹配全部可匹配结果, 如果你不带g,在正则过程中,字符串是从左至右匹配的,如果匹配成功就不再继续向右匹配了,如果你带g,它会重头到尾的把正确匹配的字符串挑选出来 例如: var str = 'aaaaaaaa' var reg1 = /a/ var reg2 = /a/g str.match(reg1) // 结果为:["a", index: 0, input: "aaaaaaaa"]

  • js中的for如何实现foreach中的遍历

    js中没有foreach这个关键字,但是可以用var v in array来实现遍历.但是需要注意的是, 拿到的是key而不是value.看例子: 复制代码 代码如下: <script type="text/javascript"> // 普通数组 var intArray = new Array(); intArray[0] = "第一个"; intArray[1] = "第二个"; for(var i = 0; i<intA

随机推荐