for of和for in的区别

2020-09-08 09:01:18 阅读：232 来源： 互联网

1.遍历数组

for in，for of都可以遍历数组的，for in 里面的key(定义的一个变量）是数组的下标，而for of里面的key是数组每个下标对应的值

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

2.遍历对象

for in可以遍历对象，但是for of不行（如果对象本身定义了迭代器的话就可以遍历）

           let obj = {
                a:1,
                b:2,
                c:3,
            }
            for(let key in obj){
                console.log(key);//a b c
                console.log(obj[key]);//1 2 3
            }
            for(let key of obj){
                console.log(key);//Uncaught TypeError: obj is not iterable
                console.log(obj[key]);//Uncaught TypeError: obj is not iterable
            }

3.for of遍历对象的方法

首先我们先来了解一个叫作@@iterator的家伙，这个家伙是数组内置的，我们使用ES6的Symbol.iterator获取对象的@@iterator内部属性，它主要是用来返回一个迭代器对象的函数。它的next（）方法会返回一个形为{value:....,done:...}的值，value是当前的遍历的值，done是一个布尔值，表示是否还有可以遍历的值。

            var arr = [1,2,3];
            var it = arr[Symbol.iterator]();
            console.log(it.next());//{value: 1, done: false}
            console.log(it.next());//{value: 2, done: false}
            console.log(it.next());//{value: 2, done: false}
            console.log(it.next());//{value: undefined, done: true}

对象是没有这个家伙的，但是我们可以给想要遍历的对象定义个@@iterator，具体如下：

            let obj ={
                a:1,
                b:2,
                c:3,
            }
            Object.defineProperty(obj,Symbol.iterator,{
                enumerable:false,
                writable:false,
                configurable:true,
                value:function(){
                    var o = this;//obj
                    var idx = 0;//下标等下用来遍历值
                    var ks = Object.keys(o);//返回一个包含所有属性名的数组
                    return {
                        next:function(){
                            return{
                                value:o[ks[idx++]],
                                done:(idx>ks.length)//如果idx大于kx的长度表明已经遍历完毕，没有再遍历的了
                            };
                        }
                    };
                    
                }
            });
            //手动遍历obj
            var it = obj[Symbol.iterator]();
            console.log(it.next());//{value: 1, done: false}
            console.log(it.next());//{value: 2, done: false}
            console.log(it.next());//{value: 3, done: false}
            console.log(it.next());//{value: undefined, done: true}
            for(let key of obj){
                console.log(key);//1 2 3
                console.log(obj[key])//undefined undefined undefined
            }

这样我们就可以实现for of的对象遍历了，这时候，我再想一个问题为什么for of不能用来遍历对象了？

其实，简单来说就是为了避免影响未来的对象的类型。

标签：遍历,obj,log,区别,value,key,console
来源： https://www.cnblogs.com/MySweetheart/p/13630482.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

for of和for in的区别