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. Bus Blaster

    http://dangerousprototypes.com/docs/Bus_Blaster Bus Blaster v2 is an experimental, high-speed JTAG d ...

  2. ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小解决办法

    1.今天写的存储过程在执行过程中,报如下错误. exec PRO_T_008pro_update_add_delete(17,1,1,1,1,45.0,54.0,45.0,45.0,45.0,54.0 ...

  3. 通过ExchangeService 发送邮件

    ExchangeService service = new ExchangeService(); service.Url = new Uri("https://***(host)/ews/e ...

  4. 选择排序是外面循环的array[i]与内循环的array[j]比较。冒泡排序是内循环的相邻两个值做比较修改

    选择排序是外面循环的array[i]与内循环的array[j]比较.冒泡排序是内循环的相邻两个值做比较修改

  5. linux列出一个目录及其子目录下面的某种类型的文件

    linux列出一个目录及其子目录下面的某种类型的文件 作者:smarteng ⁄ 时间:2009年07月09日 ⁄ 分类: Linux命令 ⁄ 评论:0 怎么样把,一个目录及其所有的子目录下面的某种类 ...

  6. 使用 MVC 5 的 EF6 Code First 入门 系列：建立一个EF数据模型

    这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第一篇:建立一个E ...

  7. CRF 及CRF++ 安装与解释

    CRF简介 Conditional Random Field:条件随机场,一种机器学习技术(模型) CRF由John Lafferty最早用于NLP技术领域,其在NLP技术领域中主要用于文本标注,并有 ...

  8. 第二章 Java浮点数精确计算

    1.实际意义 在实际开发中,如果需要进行float或double的精确计算(尤其是财务计算),直接使用float或double是不行的(具体的例子看下边的代码的main方法的测试结果),需要使用Big ...

  9. ：Windows下RabbitMQ安装及入门

    1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...

  10. jQuery调用WCF需要注意的一些问题

    昨天,博客园首页增加了Digg功能.在该功能中我们开始尝试使用jQuery直接调用WCF.之前我们采用的方案是jQuery调用Web Service,然后WebService再调用服务层.这样调用主要 ...