JavaScript中的for循环,forEach循环,for...in循环的区别

在开发中，我们经常会对数组或者对象进行遍历，常使用for循环,forEach循环,for...in循环等方法，现在我们来看一下他们的用法和区别

一、for循环

1.用法

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

2.代码

<script>
    var arr = ['a','b','c','d','e'];
    for(i = 0;i <= arr.length -1;i++){
        console.log(i,arr[i]);
    }
</script>

3.结果

二、forEach循环

1.用法

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

2.代码

<script>
    var arr = ['a','b','c','d','e'];
    arr.forEach(function(item,key,arr){
        console.log(item,key,arr);
    })
</script>

3.结果

三、for...in循环

遍历数组

1.语法

for...in
语法形式:
    for(var 自定义变量 in 数组){程序}
    会将 数组的索引下标,存储在自定义变量中
    通过自定义变量存储的索引,来获取数组的单元数据信息
    只能获取索引,别的不能获取
    存储的索引的数据类型是字符串类型

2.代码

<script>
    var arr = ['a','b','c','d','e'];
    for(var key in arr){
        console.log(key,arr[key]);
    }
</script>

3.结果

遍历对象

1.语法

for...in
语法形式:
    for(var 自定义变量 in 对象){程序}
    会将 对象的属性,存储在自定义变量中
    通过自定义变量存储的属性,来获取对象的属性值

2.代码

<script>
    var obj = {a:'北京',b:'上海',c:'南京',d:'成都',e:'西安'};
    for(var k in obj){
        console.log(k,obj[k]);
    }
</script>

3.结果

四、总结

for循环 forEach()循环 for...in循环
针对数组而言,都可以完成我们的需求
    forEach() 在遍历数组时候最简单最方便
    for循环的优点是,可以控制循环的起始和结束
    for...in一般是针对对象的循环