[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]

场景

在使用 JavaScript 开发或阅读代码时，会遇到forin语法的循环语句。这个循环语句到底会遍历什么数据？

说明

用于迭代具有可枚举属性的对象(除了Symbol内置对象).
迭代可枚举属性的顺序不确定的。
不适用于基于索引顺序的数组，因为不一定按照索引顺序迭代。如果是迭代数组，使用常规for...i循环或者使用数组的内置方法forEach(function(item)).
语法
```
for (variable in object)
  statement
1
2
```
可使用let,const,var来声明variable.
可以在迭代循环里修改属性值.
使用对象内置的hasOwnProperty()方法来判断是否是直接属性，而不是继承过来的。
使用obj.propertyIsEnumerable(prop)来判断是否某个属性是否可枚举。
for...in是为了枚举对象属性构建的，常用在调试时输出到控制台。

例子

<html>
    <body>
        <p id="out">for...inp>
    body>
    <script>
        function print(str){
            let p = document.createElement("p");
            p.innerHTML = str;
            document.body.append(p)
        }

        let visitData = {url:"https://blog.csdn.net/infoworld",action:"subcribe"};
        
        print("1. 遍历可枚举属性.");
        print("-- 修改属性前");
        for(const p in visitData){
            print(`${p}=${visitData[p]}`);
            visitData[p] = "hello";
        }

        print("-- 修改属性后");
        for(const p in visitData){
            print(`${p}=${visitData[p]}`);
        }

        function User() {
          this.color = 'red';
        }

        User.prototype = visitData;

        print("2. 遍历继承的可枚举属性");
        let user = new User();
        for(const p in user)
            print(`${p}=${user[p]}`);
        
        print("3. 只遍历自身可枚举属性");
        print("-- 修改属性前");
        for(const p in user){
            if(user.hasOwnProperty(p)){
                print(`${p}=${user[p]}`);
                user[p] = "world";
            }
        }

        print("-- 修改属性后");
        for(const p in user){
            if(user.hasOwnProperty(p))
                print(`${p}=${user[p]}`);
        }

        print("4. for...in不应该用于迭代一个关注索引顺序的 Array");
        let jsonArray = ['https://blog.csdn.net/infoworld','Tobey'];
        for(const i in jsonArray)
            print(`${i}=${jsonArray[i]}`);

        print("5. 使用数组forEach方法遍历数组");    
        jsonArray.forEach(one => {
            print(one);
        });
        
        print("6. 遍历p元素可枚举属性");
        const p = document.getElementById("out");
        for(const prop in p){
            print(`${prop}=${p[prop]}`);
        }
    script>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

输出

for...in

1. 遍历可枚举属性.

-- 修改属性前

url=https://blog.csdn.net/infoworld

action=subcribe

-- 修改属性后

url=hello

action=hello

2. 遍历继承的可枚举属性

color=red

url=hello

action=hello

3. 只遍历自身可枚举属性

-- 修改属性前

color=red

-- 修改属性后

color=world

4. for...in不应该用于迭代一个关注索引顺序的 Array

0=https://blog.csdn.net/infoworld

1=Tobey

5. 使用数组forEach方法遍历数组

https://blog.csdn.net/infoworld

Tobey

6. 遍历p元素可枚举属性

align=

...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

参考

相关阅读:
【师兄啊师兄2】大爆料，敖乙回归，创造新里程碑，有望做成年番
Tang Capital宣布收购纳斯达克上市公司Rain Oncology100%股权
浅谈HTTP
力扣（LeetCode）算法_C++——稀疏矩阵的乘法
House of pig 原理详解&实战
ssm基于web的教务管理系统毕业设计源码261620
Swift基础语法 - 流程控制
R语言使用oneway.test函数执行单因素方差分析（One-Way ANOVA）、使用数据集的子集数据进行单因素方差分析（subset函数筛选数据子集）
基于DotNetty实现自动发布 - 实现一键打包发布
pytorch在GPU上运行模型实现并行计算

原文地址：https://blog.csdn.net/infoworld/article/details/126679590