javascript总for of和for in的区别?

都是遍历,那有什么区别呢、?

阅读 74.2k
评论
    13 个回答

    for of是ES6的标准

      以下两个输出结果是相通的

      for (var key in arr){
          console.log(arr[key]);
      }
      
      for (var value of arr){
          console.log(value);
      }

        简单说,for in是遍历键名,for of是遍历键值。
        例如:

        let arr = ["a","b"];
        for (a in arr) {
            console.log(a);//1,2
        }
        
        for (a of arr) {
            console.log(a);//a,b
        }

        由于for of的这个特性,他还可以实现对iterator对象的遍历,而for in就是简单的遍历了。

          个人理解。for in是循环遍历对象;for of语法和for in语法很像,但它的功能却丰富的多,它能循环很多东西。推荐使用for of

            • 3.9k

            这种问题,我推荐去看下规范,MDN 的就不错

              for in是ES5标准,for of是ES6标准;for in是遍历对象属性,for of是遍历对象元素。for of兼容性还不够,移动端安卓微信浏览器貌似不支持,苹果的可以;web端IE支持也不够,chrome可以。

                for-of是ES6引进的新语法,for-in循环是遍历对象的属性,for-of循环是遍历实现iterator接口的成员。可以参考阮一峰大神的es6入门里的Iterator和for...of循环

                  • 4.5k

                  for in遍厉数组无法保证输出值的顺序,而for of可以保证输出顺序,这个是本质也是最大的差别,es6后建议使用for of会避免许多小的不必要错误,之前的for in最好用于遍厉对象,因为对象是无序的

                    • 10.6k

                    请类比Java中对List(的元素)和Map(的Key)的遍历。

                      Object.prototype.objCustom = function () {}; 
                      Array.prototype.arrCustom = function () {};
                      
                      let iterable = [3, 5, 7];
                      iterable.foo = "hello";
                      
                      for (let i in iterable) {
                        console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
                      }
                      
                      
                      for (let i of iterable) {
                        console.log(i); // logs 3, 5, 7
                      }
                      

                      MDN

                        for ... of循环和for ... in循环区别
                        for ... in循环遍历的实际上是对象的属性名称。
                        for ... of循环遍历的是对象的值
                        `
                        var a = ['A', 'B', 'C'];
                        var s = new Set(['A', 'B', 'C']);
                        var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
                        for (var x of a) { // 遍历Array

                        alert(x);

                        }
                        for (var x of s) { // 遍历Set

                        alert(x);

                        }
                        for (var x of m) { // 遍历Map

                        alert(x[0] + '=' + x[1]);

                        }`

                          参考MDN MDN关于for of的解释
                          for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.
                          也就是说,for of只可以循环可迭代对象的可迭代属性,不可迭代属性在循环中被忽略了。
                          并且给与了一个对比的例子

                          Object.prototype.objCustom = function () {}; 
                          Array.prototype.arrCustom = function () {};
                          
                          let iterable = [3, 5, 7];
                          iterable.foo = "hello";
                          
                          for (let i in iterable) {
                            console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
                          }
                          
                          for (let i of iterable) {
                            console.log(i); // logs 3, 5, 7
                          }

                          我们可以看到,对于array的不可迭代元属性objCustom、arrCustom和实例属性foo,在循环中都被忽略
                          这是for in迭代KEY,for of迭代value之外最大的区别

                            先说结论:

                            1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of

                            2. for...in循环出的是key,for...of循环出的是value

                            3. 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

                            4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

                            假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

                            使用for...in循环:

                            for(let index in aArray){
                                console.log(`${aArray[index]}`);
                            }

                            使用for...of循环:

                            for(var value of aArray){
                                console.log(value);
                            }

                            咋一看好像好像只是写法不一样而已,那为什么说for...of修复了for...in的缺陷和不足。
                            假设我们往数组添加一个属性name:
                            aArray.name = 'demo',再分别查看上面写的两个循环:

                            for(let index in aArray){
                                console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
                            }
                            for(var value of aArray){
                                console.log(value);
                            }

                            所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

                            for...of循环不会循环对象的key,只会循环出数组的value,因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

                            如果实在想用for...of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组
                            然后遍历:

                            var student={
                                name:'wujunchuan',
                                age:22,
                                locate:{
                                country:'china',
                                city:'xiamen',
                                school:'XMUT'
                                }
                            }
                            for(var key of Object.keys(student)){
                                //使用Object.keys()方法获取对象key的数组
                                console.log(key+": "+student[key]);
                            }

                            具体可以参考我这篇博客文章:JavaScript中的for-of循环

                              撰写回答

                              登录后参与交流、获取后续更新提醒