for in 和 for of 的区别(详解案例)

ES5 :以前for循环: for in 循环(for in循环:既可以循环数组,又可以循环json)

ES6:新增循环:for of 遍历(迭代)迭代器

两者区别

1.1  for in 循环数组:

        var books=['三国演义','水浒传','恶作剧之吻']
        for(let i in books){
            console.log(i);              //0,1,2
            console.log(books[i]);       //三国演义 水浒传 恶作剧之吻
        }   

可以看到for in 循环输出的是数组下标 0 ,1,2

循环数组：实际上是把数组当作对象看待（下标就是键，元素就是值）

1.2  for in 循环对象(是可以枚举对象):

 var person ={
            name:'董卓',
            age:18,
            sex:'男'
        }
        for(let key in person){
            console.log(key);   // 输出的是键(key): name age sex
            console.log(person[key]);
        }  //name 董卓 age 18 sex 男age sex

for in 循环对象的时候,可以看到输出的是对象的key值,所以是对object的key值进行循环

如果此时用for of尝试循环:

   var person ={
            name:'董卓',
            age:18,
            sex:'男'
        }
      
        for(let key of person){
            console.log(key);
        }      // Uncaught TypeError: person is not iterable

可以看到输出出错person is not iterable(表示person不是一个迭代器),说明 for of 不能循环对象,

for of只能循环迭代器.

2.1 for of 循环数组(实际上把数组的内容自动转换成迭代器):

    var arr =[12,13,14,15,16]
    console.log(arr.keys());
    for(let key of arr.keys()){
        console.log(key);
    }

可以看到第一个输出是 Iteratar(迭代器),也就是说arr.keys()是一个迭代器,里面存放的内容就是数组的键key(下标)

         console.log(arr.values());//是个迭代器，里面的内容是数组的元素。
         for(let value of arr.values()){
             console.log(value);
         }

         console.log("arr.entries()",arr.entries());//是个迭代器，里面的内容包括下标和元素
         for(var name of arr.entries()){
             console.log(name);//下标和对应的元素。
         }

         for(let key of arr){//看上去可以循环数组，但是实际是迭代器
             console.log(key);  //12,13,14,15,16
         }

2.2 for of 循环map(map是一个键值对集合):

var m1 = new Map()  //定义map

    //给map里面添加元素 ,每个元素由key和value组成
    m1.set('001',{id:'001',name:'董卓',age:18})
    m1.set('002',{id:'002',name:'杨幂',age:28})
    m1.set('003',{id:'003',name:'加拿大克里斯',age:11})
    for(let item of m1){
        console.log(item);
    }
    console.log("============================");//分割线
    for(let key of m1.keys()){
        console.log(key);
    }
    console.log("============================");//分割线
    for(let value of m1.values()){
        console.log(value);
    }
    console.log("============================");//分割线
    for(var name of m1.entries()){
            console.log(name);        
        }

 通过for of循环数组和map集合,有一个小想法:数组的下标就是它的键???,欢迎来到评论区讨论