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. 不错的SDL源码分析

     SDL源码分析 1:初始化(SDL_Init()) 2:窗口(SDL_Window) 3:渲染器(SDL_Renderer) 4:纹理(SDL_Texture) 5:更新纹理(SDL_UpdateT ...

  2. [Android] 字体使用dp单位避免设置系统字体大小对排版的影响

    [Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...

  3. Microsoft office2016打开很慢解决

    (1)打开Excel(word.ppt也可以),进入空白纸张,或者随便打开或新建一个文件也行,然后点击左上角“文件”按钮,进入点击“选项”. (2)然后在“常规”选项里,拉到最下面,把“”这个选项去除 ...

  4. Major GC 是清理老年代。 Full GC 是清理整个堆空间—包括年轻代和老年代。

    Major GC 是清理老年代. Full GC 是清理整个堆空间—包括年轻代和老年代.

  5. java 内存溢出 栈溢出的原因与排查方法

     1. 内存溢出的原因是什么?        内存溢出是由于没被引用的对象(垃圾)过多造成JVM没有及时回收,造成的内存溢出.如果出现这种现象可行代码排查: 一)是否App中的类中和引用变量过多使用了 ...

  6. C#编程（二）

    C#中的变量 例如:int i;//声明一个int类型的变量,变量名是 i;在未为该变量进行赋值操作前,禁止使用该变量.使用(=)给变量赋值,在声明之后可以 i=10来赋值.也可以在声明一个变量的同时 ...

  7. 【docker-compose】使用docker-compose启动spring-boot+mysql，服务内连数据库报错：create connection SQLException, url: jdbc:mysql://mysql:33061/swapping?useSSL=false&useUnicode=true&characterEncoding=UTF-8, errorCode 0,

    完整配置在这里, https://www.cnblogs.com/sxdcgaq8080/p/10070948.html 启动报错如下: 2018-12-05 01:04:05.569 ERROR 1 ...

  8. .NET：异常以及异常处理框架探析（转载）

    概述 一般情况下,企业级应用都对应着复杂的业务逻辑,为了保证系统的健壮,必然需要面对各种系统业务异常和运行时异常. 不好的异常处理方式容易造成应用程序逻辑混乱,脆弱而难于管理.应用程序中充斥着零散的异 ...

  9. [runtime] initialize方法讲解

    + (void)initializeDescription(描述)    Initializes the class before it receives its first message. 在这个 ...

  10. mac下zsh的使用：主题、z命令

    安装Oh-My-ZSH: `curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh` zs ...