1、循环中断差别

具体见示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>js for forEach区别 </title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            let arr = [1, 2, 3, 4]

            for(let i = 0; i < arr.length; i++) {

                if(arr[i] == 2) {

                    continue;

                    //break;

                }

                console.log(arr[i], '  for')

            }

            for(let i in arr) {

                if(i == 2) {

                    break;

                }

                console.log(arr[i], '   for in')

            }

            for(let i of arr) {

                if(i == 2) {

                    break;

                }

                console.log(i, '   for of')

            }

            arr.forEach(val => {

                if(val == 2) {

                    //此处的return false 仅仅相当于continue

                    return false;

                    //break或者continue均不能使用 会报错，对于map filter方法一样会报错

                    //break;

                    //continue

                }

                console.log(val, '   forEach')

            })

        </script>

    </body>

</html>

数组的迭代方法：every、filter、forEach、map、some均不能使用break或者continue进行中断循环。

以上几个函数的参数都是：一个回调函数 和 一个this的指向

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

2、数组变化时差别

（1）数组添加操作

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>js for forEach区别 </title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            let arr = [1, 2, 3, 4]

            for(let i = 0; i < arr.length; i++) {

                if(arr[i] == 2) {

                    //对于添加时，for可以遍历新数组

                    arr.push(5)

                }

                // 输出1 2 3 4 5

                console.log(arr[i], '  for')

            }

            arr.forEach(val => {

                if(val == 2) {

                    //对于添加时，forEach

                    arr.push(5)

                }

                // 输出1 2 3 4 5

                console.log(val, '   forEach')

            })

        </script>

    </body>

</html>

（2）数组更新、删除操作

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>js for forEach区别 </title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            let arr = [1, 2, 3, 4]

            for(let i = 0; i < arr.length; i++) {

                if(arr[i] == 2) {

                    //对于更新、删除时，for可以遍历新数组

                    arr[1] = 100

                    //arr.splice(i,1)

                }

                // 输出1 100 3 4

                console.log(arr[i], '  for')

            }

            arr.forEach((val, i) => {

                if(val == 2) {

                    //对于更新、删除时，forEach可以遍历新数组

                    val = 100

                    //arr.splice(i,1)

                }

                // 输出1 100 3 4

                console.log(val, '   forEach')

            })

        </script>

    </body>

</html>

js forEach for区别的更多相关文章

  1. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  2. JS中map和foreach的区别以及some和every的用法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  3. js forEach参数详解，forEach与for循环区别，forEach中如何删除数组元素

     壹 ❀ 引 在JS开发工作中,遍历数组的操作可谓十分常见了,那么像for循环,forEach此类方法自然也不会陌生,我个人也觉得forEach不值得写一篇博客记录,直到我遇到了一个有趣的问题,我们来 ...

  4. JS中map与forEach的区别

    很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...

  5. 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点

    应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...

  6. js == 与 === 的区别，‘’与“”的区别

    js == 与 === 的区别 1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值&quo ...

  7. for循环与foreach的区别

    for循环与foreach的区别 foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后 ...

  8. every();some();filter();map();forEach()各自区别：

    every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...

  9. jQuery each和js forEach用法比较

    本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...

随机推荐

  1. 使用matplotlib的示例：调整字体-设置colormap和colorbar

    使用matplotlib的示例:调整字体-设置colormap和colorbar # -*- coding: utf-8 -*- #********************************** ...

  2. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 （动态树LCT）

    2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2843  Solved: 1519[Submi ...

  3. QCon大会上推荐阅读的10本书

    QCon北京2014大会将于4月25-27日在北京国际会议中心盛大开幕.QCon是由@InfoQ 主办的全球顶级技术盛会.在此次盛会中,现场将有@人民邮电出版社-信息技术分社 主办的现场扫描二维码赠书 ...

  4. Tasker to answer incoming call by pressing power button

    nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...

  5. WIN7 下面 装XP

    WIN7 下面1.解压 GHOST.ISO2.点里面的 安装系统3.进入 DOS GHOST 界面,进行GHOST系统到自已指定的XP分区4.开始安装XP5.安装完毕后,打开 dbr-1.2.0.0. ...

  6. Access-Control-Allow-Origin，跨域

    1.浏览器的同源安全策略 浏览器只允许请求当前域的资源,而对其他域的资源表示不信任.那怎么才算跨域呢? 请求协议http,https的不同 域domain的不同 端口port的不同 好好好,大概就是这 ...

  7. WCF服务端调用client.

    wcf服务端 1,新建一个"windows窗口程序"名称为WCFServer2. 2.然后加入一个"WCF服务"名称为Service1. 详细步骤为:解决方式试 ...

  8. Ext ComboBox 动态查询

    Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfx ...

  9. struts2 iterator 迭代标签只显示前五条记录

    <s:iterator value="#session.produceLists" var="produce" begin="0" e ...

  10. 10 Big Data Possibilities for 2017 Based on Oracle's Predictions

    2017 will see a host of informed predictions, lower costs, and even business-centric gains, courtesy ...