js- for、forEach、for...in（循环遍历数组的方法）

「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」

==一.循环遍历数组的方法==

方法1: 通过**for**循环,生成所有的索引下标

for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 }

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

语法: 数组.forEach(function(形参1,形参2,形参3){})

形参1: 存储的是当前循环次数时,获取的单元数据

参数2: 存储的是当前循环次数时,获取的单元索引下标

参数3: 存储的是原始数组

三个形参,不一定都要定义,可以根据实际需求

形参可以任意定义,只要符合命名规范就可以

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

 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);
    })

方法3：for...in
for(var 自定义变量 in 数组){程序}

会将 数组的索引下标,存储在自定义变量中

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

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

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

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

总结

forEach() 专门针对数组的循环遍历 语法形式:

 数组.forEach(function(参数1,参数2,参数3){程序})
 

参数1 : 存储 数组单元数据

参数2 : 存储 数组单元索引

参数3 : 存储 原始数组

参数名称可以任意定义,参数个数,根据需求来定义

for...in 数组,对象都可以使用的循环 语法形式:

 for(var 自定义变量 in 数组){程序} 
 

自定义变量 : 存储 数组单元索引

          存储的索引的数据类型是字符串类型
          如果要执行加法运算,需要转化为数值类型
          只有for...in需要转化

for循环 forEach()循环 for...in循环

针对数组而言,都可以完成我们的需求

只是针对不同的情况

推荐使用 forEach() 最简单最方便

for循环的优点是,可以控制循环的起始和结束

for...in一般是针对对象的循环

==二.循环遍历数组的案例==

1.demo1: forEach

2.demo2: for...in