首页 > 建站教程 > JS、jQ、TS >  浅谈for,for-in,forEach,for-of几种循环正文

浅谈for,for-in,forEach,for-of几种循环

    今天主要来给大家说一下for的几种循环,仅代表个人的想法与观点,欢迎各位大神批评。 
    for循环主要有以下几种: 
         1.一般的for循环 
         2.for-in循环 
         3.forEach循环 
         4.for-of循环 

一.首先是普通的for循环,例如:
var arr = ["a","b","c"];
for(var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
}
     这种for循环是很多初学者用的最多的一种,除了写法上不够简洁外,其他的没啥问题,这里不再赘述。 

二.for-in循环 
     (1)索引为字符串 
     (2)无顺序(通常用于对象或json中) 
     (3)可扩展属性也会遍历 
     用法如下:
var arr = ["a","b","c"];
for(var v in arr){           //这里的v代表的是key值,主要用于输出key值
        console.log(typeof v);     //string,索引为字符串
        console.log(arr[v]);
}
     结果如下:


    那么,可扩展属性也会遍历是什么意思呢?我们来看一个栗子:
var arr = ["a","b","c"];
        arr.name = "hello";
        for(var v in arr){//这里的v代表的是key值,主要用于输出key值
            //console.log(typeof v);
            console.log(arr[v]);
            console.log(v)
        }
     结果是:


    我们可以看到,arr的扩展属性也被遍历出来了
    因为它的无序性,所以for-in循环我们通常用于对象或json中,再看下面一个栗子:
var obj = {
            name:"hello",
            age:"18",
            11:22           
        }
        for(var v in obj){
        console.log(v);     //遍历对象的属性
        console.log(obj[v]);       //遍历对象的属性值
    } 
     结果为:


三.forEach 
      forEach循环有一个缺点:你不能中断循环(使比如说用break语句或使用return语句),反正这个我用的少~~~。栗子:
 var arr = ['a','b','c'];
    arr.forEach(function (value) {  //不能跳出循环操作
        console.log(value);
        break;
    });
     结果如下:


四.for-of 
     1.目前遍历 数组 最便利的方法 
     2.避免了for-in,forEach的所有缺陷 
     3.可以用在 类数组,字符串,set和map数据 上 
     4.不支持对象的遍历(但是它提供了其他的三种方法) 
            ①Object.keys() 
            ②Object.values() 
            ③Object.entries() 
     一个简单地栗子先说一下他怎么用的:
var arr = ['q','w','e'];
    for(var v of arr){
        console.log(v);
    }
     结果如下:

    for-of是可以跳出循环的(避免了forEach的缺陷),栗子如下:
var arr = ['q','w','e'];
    for(var v of arr){
        console.log(v);
        break;
  }
     此时只会输出了一个q,说明跳出循环了
     for-of也可以循环字符串,上栗子:
var str = "hello";
    for(var v of str){
        console.log(v);
    }
     结果如下:


    for-of也可以循环类数组,栗子:
 function foo(){
        for(var i of arguments){
            console.log(i)
        }
    }
    foo(1,2,3,4);
     结果如下:



    接下来我们来看一下对象:
 var obj = {
        name:"hello",
        age:"18"
    };
    for(var i of obj){
     console.log(i);
    }
     运行之后我们发现报错了:obj[Symbol.iterator] is not a function

     我们前面提到,for-of不支持对象的遍历,但是它提供了另外的其他三种方法,我们来试一下: 
        (1)Object.keys()
   var obj = {
        name:"hello",
        age:"18"
    };
    for(var i of Object.keys(obj)){
     console.log(i);
    }
     结果如下:


     这个时候我们看到,我们使用Object.keys()这个方法,把obj这个对象的属性给遍历出来了(【注意】这里面Object.keys(),O要大写,另外两种方法也一样),那么如果想要属性值呢,?那当然就是Object.values()这个方法了 ,我们来试一下:
 var obj = {
        name:"hello",
        age:"18"
    };
    for(var i of Object.values(obj)){
     console.log(i);
    }
     果然,属性值出来了:


     那小伙伴们肯定已经知道Object.entries()的作用了,我们也来试一下:
var obj = {
        name:"hello",
        age:"18"
    };
    for(var i of Object.entries(obj)){
     console.log(i);
    }
     对象obj的属性和属性值都被遍历了出来: 


【注意】此时是数组