• 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
  • 相关阅读:
    微调GPT3.5模型实例
    用户忠诚度：小程序积分商城的用户保持方法
    基于SpringBoot的在线小说阅读平台系统
    C++游戏设计教程（4）—— 用颜色原理打印平面地图
    GaussDB SQL基础语法示例-常见的条件表达式
    node.js--模块化
    typeScript--[数据定义]
    JS之同步异步promise、async、await
    mysql的mysql_store_result函数调用问题（C的API）
    在 JavaScript 中深度克隆对象
  • 原文地址：https://blog.csdn.net/qq_43378689/article/details/126037053