JavaScript-如何遍历对象中的属性，for...in语句的使用

约定不等于承诺〃 2023-05-29 05:24 21阅读 0赞

JS对象中存储的数据是无序的，通过 for 循环无法遍历，这时就可以使用 `for...in` 来进行遍历

#### for…in ####

`for...in` 语句可用于遍历对象属性或数组元素；循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

该语句只能循环遍历可枚举属性；像 Array和 Object 使用内置构造函数所创建的对象都会继承自Object.prototype 和 String.prototype 的不可枚举属性无法遍历

语法：

for (variable in object) { 
    	代码块;
    }

参数：

*  `variable` 遍历的是对象时其值为对象中的属性名，遍历的是数组是其值为数组元素的索引值
 *  `object` 被遍历的对象，可以是数组也可以是对象

遍历对象：

var obj = { 
      name: "小洁",
      age: 18,
      sex: "女",
      // 对象中的方法
      intro: function(){ 
        console.log("我是" +obj.name+"今年" +obj.age+"岁");
      } // 最后一个键值对不加逗号（与数组很像）
    };
    
    // 遍历对象中的属性
    for (key in obj) { 
      // 打印属性名和对应的属性值
      console.log(key, obj[key])
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
遍历数组：

var arr = [1, 3, 5, 7, 9]
    
    for (key in arr) { 
      // 遍历数组中的元素和元素对应的值
      console.log(key, arr[key])
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104194807326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104195023195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70