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 遍历的是数组的索引,对象的属性,以及原型链上的属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/549149.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 统一功能处理(二)

本篇主要介绍Spring Boot统一功能处理中的统一数据返回格式。 目录 一、定义统一的返回类 二、配置统一数据格式 三、测试配置效果 四、统一格式返回的优点 五、源码角度解析String问题 一、定义统一的返回类 在我们的接口在处理请求时&#xff0c;返回的结果可以说是参…

判断位数、按位输出、倒序输出(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int number 0;int i 1;int m 0;int z 0;int z1 0, z2 0, z3 0, z4 0;//提示用户&#xff1b;printf("请输…

编程新手必看,Python3中函数知识点及语法学习总结(18)

介绍&#xff1a; Python3中的函数是组织好的、可重复使用的代码段&#xff0c;用于实现单一或相关联的功能。 以下是Python3中函数的一些基本介绍&#xff1a; 函数定义&#xff1a;在Python中&#xff0c;可以通过def关键字来定义一个函数。函数定义后&#xff0c;可以多次调…

ADB的基本语法及常用命令

学习网址 ADB命令的基本语法如下&#xff1a; adb [-d|-e|-s <serialNumber>] <command> 如果有多个设备/模拟器连接&#xff0c;则需要为命令指定目标设备。 参数及含义如下&#xff1a; 常用命令如下&#xff1a; 1. 启动ADB服务 adb start-server 2. 停止…

【ROS2笔记六】ROS2中自定义接口

6.ROS2中自定义接口 文章目录 6.ROS2中自定义接口6.1接口常用的CLI6.2标准的接口形式6.3接口的数据类型6.4自定义接口Reference 在ROS2中接口interface是一种定义消息、服务或动作的规范&#xff0c;用于描述数据结构、字段和数据类型。ROS2中的接口可以分为以下的几种消息类型…

腾讯云优惠券领取及使用教程详解

腾讯云作为国内领先的云服务提供商&#xff0c;以其稳定可靠、性能卓越的服务赢得了广大用户的青睐。为了回馈用户&#xff0c;腾讯云经常推出各种优惠活动&#xff0c;其中优惠券就是非常受欢迎的一种。本文将详细介绍腾讯云优惠券的领取和使用方法&#xff0c;帮助大家更好地…

【c语言】结构体的访问

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…

记录 OpenHarmony 使用 request.uploadFile 时踩的坑

​ 开发环境 设备环境&#xff1a;OpenHarmony 4.1.x SDK 版本&#xff1a;API 10 开发模型&#xff1a;Stage 模型 IDLE: Dev Eco 4.1 官方文档 踩坑一&#xff1a;后台服务地址 上传文件依赖后台服务器&#xff0c;如果使用本地搭建的服务&#xff0c;是无法访问的&…

两部电话机怎样能实现对讲?直接连接能互相通话吗?门卫门房传达室岗亭电话怎么搞?

目录 两部电话机能直接连接吗&#xff1f;用三通头分出来一条电话线两部电话机用一根电话线直接连接能互相通话吗&#xff1f; 什么电话机可以直接连接两部IP电话机&#xff08;网络电话机&#xff09;可以直接连接两部普通电话机之间通过一个电话交换机也可以连接跨区域的两部…

Avalonia中嵌入网页程序(CefNet)

Avalonia中嵌入网页程序cefNet 1. 引入CefNetNuget包2. 下载 cef 基础环境3. 将cef基础环境放入程序运行目录下4. 代码中初始化cef5. 添加Webview控件6. 在窗口关闭的时候释放Cef7. 项目结构图CefNet 开源的作者已经停止维护并删除了原始的代码库:GetHub:CefNet,Nuget上还有发…

【简单介绍下单片机】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Python编程之旅:深入探索强大的容器——列表

在Python编程的世界中&#xff0c;容器&#xff08;Containers&#xff09;是一种用于存储多个项目的数据结构。其中&#xff0c;列表&#xff08;List&#xff09;是最常用且功能强大的容器之一。无论是初学者还是资深开发者&#xff0c;掌握列表的使用方法和技巧都是提升Pyth…

引导和服务(2)

服务 1.systemd服务的简要介绍 &#xff08;1&#xff09;对比5 6 可以解决依赖关系并行启动 &#xff08;2&#xff09;按需启动 &#xff08;3&#xff09;自动解决依赖关系 负责在系统启动或运行时&#xff0c;激活系统资源&#xff0c;服务器进程和其它进程 2.System…

Python 处理地理空间异常值:基于 MAD 的简单方法

就像任何其他数据一样,在处理地理空间数据时,识别和纠正异常值是数据准备中的关键步骤,可确保任何后续分析的准确性。异常值可能会严重扭曲空间分析的结果,从而导致错误的结论。虽然还有其他方法可以解决此问题,但处理这些异常值的一种直接有效的方法是使用中值绝对偏差 (…

第十一届土木与城市工程国际会议(ICCUE 2024)即将召开!

第十一届土木与城市工程国际会议&#xff08;ICCUE 2024&#xff09;将于2024年8月20-22日在意大利罗马召开。土木与城市工程&#xff0c;作为人类社会发展的重要基石&#xff0c;承载着推动城市繁荣、提升人民生活质量的重任。ICCUE 2024的召开&#xff0c;旨在搭建一个国际化…

HDLbits 刷题 --Mux2to1

Create a one-bit wide, 2-to-1 multiplexer. When sel0, choose a. When sel1, choose b. 译&#xff1a; 创建一个1位宽的2对1多路复用器。当sel0时&#xff0c;选择a。当sel1时&#xff0c;选择b。 个人解法&#xff1a; module top_module( input a, b, sel,output out …

IO流-IO框架

简介 java的IO流操作提供了最简单的操作&#xff0c;第三方基于日常使用习惯&#xff0c;写了很多IO框架&#xff0c;更加方便操作避免重复造轮子&#xff0c;提高开发效率 Commons-io 简介 Commons-io是apche提供的IO操作的小框架 部分常用的API 引入依赖 <dependency>…

mbti,ESFP型人格的心理问题分析

什么是ESFP型人格&#xff1f; ESFP分别代表的是外向&#xff0c;实感&#xff0c;情感和依赖&#xff0c;ESFP型人格则是一种性格上活泼开朗&#xff0c;富有同情心的一种性格&#xff0c;具有这种人格的人在日常生活当中&#xff0c;社交能力十分突出&#xff0c;活泼开朗&a…

高级IO和5种IO模型

目录 1. 高级IO1.1 IO的基本概念1.2 OS如何得知外设当中有数据可读取1.3 OS如何处理从网卡中读取到的数据包1.4 IO的步骤 2. 五种IO模型2.1 利用钓鱼来理解2.2 阻塞IO2.3 非阻塞IO2.4 信号驱动IO2.5 IO多路转接2.6 异步IO 3. 高级IO的概念3.1 同步通信 VS 异步通信3.2 阻塞 VS …

《剑指 Offer》专项突破版 - 面试题 107 : 矩阵中的距离(C++ 实现)

题目链接&#xff1a;矩阵中的距离 题目&#xff1a; 输入一个由 0、1 组成的矩阵 M&#xff0c;请输出一个大小相同的矩阵 D&#xff0c;矩阵 D 中的每个格子是矩阵 M 中对应格子离最近的 0 的距离。水平或竖直方向相邻的两个格子的距离为 1。假设矩阵 M 中至少有一个 0。 …
最新文章