for in 和 for of 的区别

1.for in 和 for of 都可以循环数组,for in 输出的是数组的 index 下标,而 for of 输出的是数组的每一项的值。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const arr = [1, 2, 3, 4, 5]

        // for in
        for (const index in arr) {
            console.log(index); // 输出 0, 1, 2, 3, 4
        }

        // for of
        for (const item of arr) {
            console.log(item) // 输出 1, 2, 3, 4, 5
        }
    </script>
</body>

</html>

2.for in 可以遍历对象,for of 不能遍历对象,只能遍历带有iterator(迭代器)接口的,例如Set,Map,String,Array。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const object = { name: 'Jack', age: 18 }

        // for ... in
        for (const key in object) {
            console.log(key) // 输出 name,age
            console.log(object[key]) // 输出 Jack,18
        }

        // for ... of
        for (const key of object) {
            console.log(key) // 报错 Uncaught TypeError: object is not iterable
        }
    </script>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用for...of循环遍历Set实例的例子
        const mySet = new Set([1, 2, 3, 4, 5]);

        // 使用for...of循环遍历Set中的元素
        for (const value of mySet) {
            console.log(value); // 打印每个元素的值
        }

        // 使用for...of循环遍历Map对象的例子
        const map = new Map();

        // 添加键值对
        map.set('key1', 'value1');
        map.set('key2', 'value2');
        map.set('key3', 'value3');

        // 使用for...of遍历Map对象
        for (const [key, value] of map) {
            console.log(key + ' = ' + value);
        }
    </script>
</body>

</html>

3.数组对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const list = [{ name: 'Jack' }, { age: 18 }]
        for (const val of list) {
            console.log(val) // 输出 { name: 'Jack' },{ age: 18 }
            for (const key in val) {
                console.log(val[key]) // 输出 Jack,18
            }
        }
    </script>
</body>

</html>

总结:for in 适合遍历对象,for of 适合遍历数组。for in 遍历的是数组的索引,对象的属性,以及原型链上的属性。

相关推荐

  1. “==”“equals”区别

    2024-04-13 14:32:01       61 阅读
  2. == equals 区别

    2024-04-13 14:32:01       64 阅读
  3. #{}${}区别

    2024-04-13 14:32:01       34 阅读
  4. &&&区别

    2024-04-13 14:32:01       40 阅读
  5. 振动震动区别

    2024-04-13 14:32:01       190 阅读
  6. axiosajax区别

    2024-04-13 14:32:01       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-13 14:32:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-13 14:32:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-13 14:32:01       87 阅读
  4. Python语言-面向对象

    2024-04-13 14:32:01       96 阅读

热门阅读

  1. ES6的模块化

    2024-04-13 14:32:01       34 阅读
  2. 10个经典Python设计模式解析

    2024-04-13 14:32:01       40 阅读
  3. centos7 安装 rabbitmq3.8.5

    2024-04-13 14:32:01       33 阅读
  4. 时空大数据引擎-GeoMesa

    2024-04-13 14:32:01       31 阅读
  5. 便携式汽车充气泵方案开发设计研发

    2024-04-13 14:32:01       31 阅读
  6. 子矩阵(c++实现)

    2024-04-13 14:32:01       33 阅读
  7. 微服务需要多表关联吗

    2024-04-13 14:32:01       38 阅读
  8. Django 实现登录功能

    2024-04-13 14:32:01       36 阅读