JS中常见的遍历方法

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中所有的遍历方法</title>
</head>

<body>

    <script>
        // 用七种方式遍历下列数组
        let arr = ['a', 'b', 'c', 'd', 'e', 'f'];


        //1、for循环
        console.log("for循环")
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
        console.log("----------------")

        // 2、for in 和for of
        // for in 只能打印index
        console.log("for in")
        for (const key in arr) {
            console.log(arr[key]);
        }
        console.log("----------------")
        // for of 打印值
        console.log("for of")
        for (const key of arr) {
            console.log(key);
        }
        console.log("----------------")

        //3、foreach
        console.log("foreach");
        arr.forEach((item, index) => {
            console.log(index + "=>" + item);
        })
        console.log("----------------")

        // 4、Symbol
        console.log("Symbol")
        let item = arr[Symbol.iterator]();
        for (const key in arr) {
            console.log(item.next().value)

        }
        console.log("----------------")

        //5、map
        // 数组.map()会返回一个新数组，数组的大小跟原始数组一样
        // 数组元素是函数返回的结果
        console.log("map")
        let newArr_map = arr.map((item, key) =>{
            console.log(item)
            return item*2;
        })
        console.log("----------------")

        // 6、filter
        // filtet是一个过滤器，也是返回一个新数组，原数组中满足返回要求的元素就复制到新数组中，不满足就不复制
        // 不会改变原数组的内容
        console.log("filter")
        let newArr_filter = arr.filter((item, key) =>{
            console.log(item);
            return item == 'a';
        })
        console.log("----------------")

        //7、Object.entries() 
        // 简单说就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来
        console.log("Object.entries() ")
        let newArr_entries = Object.entries(arr); 
        newArr_entries.forEach((item, index)=>{
            // item是个数组：['0','a']
            console.log( item[1]);

        })
    

        


    </script>

</body>

</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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

相关阅读:
Win11电脑一段时间不操作就断网怎么解决
JS基本数据类型中null和undefined区别及应用
STARK Low Degree Testing——FRI
命令执行绕过 [GXYCTF2019]Ping Ping Ping1
《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装，让你的Fiddler开挂到你怀疑人生
Java反射机制详解
代理模式（初学）
基于STM32设计物联网在线智能称重系统(OneNet)_2022
Maven 查看项目中的依赖
如何将带GPS的网络化的软件定义无线电接收机应用于分布式和移动频谱监测？（一）

原文地址：https://blog.csdn.net/qq_43378689/article/details/126037053