循环遍历数组的方法 forEach for....in

// 循环遍历数组的方法

<script>
 // 方法1: 通过for循环,生成所有的索引下标
    /*
        for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 }
    */

    // 方法2: 通过JavaScript程序,给我们提供的方法来实现循环遍历

    // 语法: 

    /*
    
        数组.forEach(function(形参1,形参2,形参3){})
    
        形参1: 存储的是当前循环次数时,获取的单元数据
        参数2: 存储的是当前循环次数时,获取的单元索引下标
        参数3: 存储的是原始数组

        三个形参,不一定都要定义,可以根据实际需求
        
        形参可以任意定义,只要符合命名规范就可以

        forEach() 只能循环遍历数组,不能循环遍历对象

    */



    /*
        for...in   
        for(var 自定义变量 in 数组){程序}
        
        会将 数组的索引下标,存储在自定义变量中

        通过自定义变量存储的索引,来获取数组的单元数据信息

        只能获取索引,别的不能获取
    
    */


    // 总结

    // forEach()   专门针对数组的循环遍历
    //   语法形式:
    //      数组.forEach(function(参数1,参数2,参数3){程序})
    //   参数1 : 存储 数组单元数据
    //   参数2 : 存储 数组单元索引
    //   参数3 : 存储 原始数组
    //   参数名称可以任意定义,参数个数,根据需求来定义

    // for...in   数组,对象都可以使用的循环
    //   语法形式:
    //      for(var 自定义变量 in 数组){程序} 
    //   自定义变量 : 存储 数组单元索引
    //               存储的索引的数据类型是字符串类型
    //               如果要执行加法运算,需要转化为数值类型
    //               只有for...in需要转化


    // for循环  forEach()循环 for...in循环
    // 针对数组而言,都可以完成我们的需求
    // 只是针对不同的情况
    // 推荐使用 forEach() 最简单最方便
    // for循环的优点是,可以控制循环的起始和结束
    // for...in一般是针对对象的循环





    // for...in    数组,对象都可以使用的循环遍历



    var arr = ['北京','上海','广州','重庆','天津'];

    /*
        第一次循环,循环对象是 第一个单元 
            val : 存储数据 '北京'   key : 存储索引 0   arr : 存储原始数组
    
        第二次循环,循环对象是 第二个单元 
            val : 存储数据 '上海'   key : 存储索引 1   arr : 存储原始数组

        第三次循环,循环对象是 第三个单元 
            val : 存储数据 '广州'   key : 存储索引 2   arr : 存储原始数组

        第四次循环,循环对象是 第四个单元 
            val : 存储数据 '重庆'   key : 存储索引 3   arr : 存储原始数组

        第五次循环,循环对象是 第五个单元 
            val : 存储数据 '天津'   key : 存储索引 4   arr : 存储原始数组
    */

    // arr.forEach(function(val,key,arr){
    //     console.log(val,key,arr);
    // })



    var arr = ['北京','上海','广州','重庆','天津'];

    for(var key in arr){  // 自定义变量,存储索引 0 1 2 3 4 ....
        console.log(key,arr[key]);   // arr[key] 就是索引对应的数据
    }
        

</script>

forEach

<style>
    table{
        border-collapse: collapse;
    }

    table td{
        border:1px solid #000;
        width: 100px;
        line-height: 40px;
        text-align: center;
        font-size: 30px;
    }
</style>

序号	姓名	性别	年龄	城市

<script>    
    var arr = [
        ['张三1' , '男' , 18 , '北京'],
        ['张三2' , '男' , 18 , '北京'],
        ['张三3' , '男' , 18 , '北京'],
        ['张三4' , '男' , 18 , '北京'],
        ['张三5' , '男' , 18 , '北京'],
        ['张三6' , '男' , 18 , '北京']
    ];
    
    setTab();

    function setTab(){
        var str = '';
        // val 存储的是 二维数组 ['张三1' , '男' , 18 , '北京']  ['张三2' , '男' , 18 , '北京'] ....
        // key 存储的是 一维索引  0  1  2  3 ....
        //     就相当于for循环中的 i
        arr.forEach(function(val , key){
            str += '<tr>';
            str += `<td>${key+1}</td>`;   //  key+1 就相当于 i+1
            val.forEach(function(v){      //  二维数组的数据 : 张三1  男  18 北京
                str += `<td>${v}</td>`;   //  v就是二维数组数据,相当于for循环中 $arr[i][j]
            })
            str += '</tr>';
        })

        tb.innerHTML = str;
    }



</script>

for…in

序号	姓名	性别	年龄	城市

<script>
    var arr = [
        ['张三1' , '男' , 18 , '北京'],
        ['张三2' , '男' , 18 , '北京'],
        ['张三3' , '男' , 18 , '北京'],
        ['张三4' , '男' , 18 , '北京'],
        ['张三5' , '男' , 18 , '北京'],
        ['张三6' , '男' , 18 , '北京']
    ];
    console.log(arr);

    setTab();

    function setTab(){
        var str = '';
                             // 这里的key的作用,就是相当于for循环中的i
        for(var key in arr){ // key 存储一维索引   arr[key] 索引对应的二维数组
            str += '<tr>';   
            str += `<td>${ parseInt(key) +1}</td>`;  // key是字符串类型,执行加法是拼接操作, parseInt(key) 获取整数部分,转化为数值类型

            for(var k in arr[key]){                 // 这里的k的作用就相当于 for循环中的j
                str += `<td>${arr[key][k]}</td>`;   // arr[key][k]  二维数组的索引
            }
            
            str += '</tr>';
        }

        tb.innerHTML = str;
    }
        



</script>