JS中for...of 与for...in 的区别_for in 便利-优快云博客

本文链接：https://blog.youkuaiyun.com/baichaji/article/details/129392607

本文介绍了JavaScript中的两种循环结构for...of和for...in的区别，主要涉及遍历数组和对象时的行为差异，包括for...in遍历数组的索引、for...of遍历数组元素的值，以及遍历对象时的情况。此外，还提到了for...in会遍历原型链上的属性，而for...of不支持，以及两者对Symbol类型和可迭代对象的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

for of 与for in 的区别

1、遍历数组

在遍历数组时，for...in便利的是数组中每项元素对应的索引，二for..of 遍历时是每一项元素的值

   // for in 遍历数组
        const arr = [1,3,5]
        for (const key in arr ){
            console.log(key)  //0 1 2  便利的是数组中的索引，并不是数组中的内容
        }
        //for in 遍历数组
        for ( const key of arr){
            console.log(key) //1 3 5 比哪里的是数组中的内容
        }

2、遍历对象

在遍历对象时，for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array,如果想要使用for..of遍历对象，可以使用Object.keys()方法

        const obj = {name:'zs',age:18,sex:'男'}
        //for..in 遍历对象
        for(const key in obj){
            console.log(key) //  name  age  sex  遍历的结果是对象的键名
        }
        //for..of  遍历对象
        for( const key of obj){
            console.log(key)  //报错 Uncaught TypeError: obj is not iterable
        }
        
        //Object.keys()方法
                for(const key of Object.keys(obj)){
            console.log(key)
        }

3、for..in在遍历时不仅可以遍历数字键名，还可以遍历手动添加上的键，也可以遍历原型上的键，但是for..of只可以遍历原生的

      // for in 遍历数组
        const arr = [1,3,5];
        //手动添加上的键
        arr.set='red';
        //在原型上添加
        Array.prototype.name='hello '
        for (const key in arr ){
            console.log(key)  //0 1 2  便利的是数组中的索引，并不是数组中的内容
        }
        //for in 遍历数组
        for ( const key of arr){
            console.log(key) //1 3 5 比哪里的是数组中的内容
        }