zoukankan      html  css  js  c++  java
  • js forEach for区别

    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>
  • 相关阅读:
    【转】Aspose.Cells读取excel文件
    sencha treestore 取消自动加载数据
    百度地图js根据经纬度定位和拖动定位点
    sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
    c# tcp备忘及networkstream.length此流不支持查找解决
    小程序view排版
    .net+mvc,ueditor
    爬虫BS4—淘女郎
    爬虫手动流程
    python web cgi
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9577433.html
Copyright © 2011-2022 走看看