解析javascript中的for in和for of

1 for in篇

1.1 当遍历数组时

1.1.1 核心语法

for (const item in arr) {
      //其中arr是需要遍历的数组,item是arr数组对应的下标(从0开始)
      //是通过arr[下标]的方式去获取数组中的元素的
       console.log(arr[index]);
}
//需要注意的是,item就类似于键值对中的键,其类型为string类型,做加法运算时需要用Number进行转换一下
1
2
3
4
5
6

1.1.2 示例html代码

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中for in的用法title>
head>
<body>
    <script>
        var arr=[1,4,true,"123"];
        // fin回车是生成for in的快捷键
        for (const item in arr) {
            console.log("arr数组中的第"+(Number(item)+1)+"个元素的值为: "+arr[item]);
        }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.1.3 示例代码运行截图

在这里插入图片描述

1.2 当遍历字符串时

1.2.1 核心语法

for (const item in str) {
    //str是字符串
    console.log("str字符串的第"+(Number(item)+1)+"个字符的值为: "+str[item]);
}
1
2
3
4

1.2.2 示例html代码

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中for in的用法title>
head>
<body>
    <script>
        var str="abctef7";
        // fin回车是生成for in的快捷键
        for (const item in str) {
            console.log("str字符串的第"+(Number(item)+1)+"个字符的值为: "+str[item]);
        }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2.3 示例代码运行截图

在这里插入图片描述

1.3 当遍历对象时

1.3.1 核心语法

for (const item in obj) {
    //其中obj是对象,item是键值对中的键(冒号前面的那部分)
     console.log(item+"的值为"+obj[item]);
}
1
2
3
4

1.3.2 示例html代码

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中for in的用法title>
head>
<body>
    <script>
       var obj={name:'牙膏',price:12.5}; 
        for (const item in obj) {
           console.log(item+"的值为: "+obj[item]);
        }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1.3.3 示例代码运行截图

在这里插入图片描述

2 for of篇

2.1 当遍历数组时

2.1.1 核心语法

for (const iterator of arr) {
   //for of是相当于获取值,没有下标(类似java中的foreach)
   console.log(iterator);
}
1
2
3
4

2.1.2 示例html代码

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中for of的用法title>
head>
<body>
    <script>
       var arr=[false,56,"123"];
       for (const iterator of arr) {
        //for of是相当于获取值,没有下标
        console.log(iterator);
       }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.1.3 示例代码运行截图

在这里插入图片描述

2.2 当遍历字符串时

2.2.1 核心语法

 for (const iterator of str) {
   //for of是相当于获取值,没有下标,str是字符串
   console.log(iterator);
}
1
2
3
4

2.2.2 示例html代码

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中for of的用法title>
head>
<body>
    <script>
       var str="jsdg54er"
       for (const iterator of str) {
        //for of是相当于获取值,没有下标
        console.log(iterator);
       }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.2.3 示例代码运行截图

在这里插入图片描述

3 总结

3.1 forof是不能遍历对象的

3.1.1 错误示例html代码

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中for of的用法title>
head>
<body>
    <script>
       var obj={name:"张三",sex:"男"};
       for (const iterator of obj) {
        //for of是相当于获取值,没有下标
        console.log(iterator);
       }
    script>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.1.2 错误示例运行截图
在这里插入图片描述

3.2 使用小贴士

当遍历对象时,采用for in

开发当中,因地制宜(根据情况去选择)就行。

相关阅读:
Linux shell编程学习笔记28：脚本调试 set命令
 android 完全退出应用程序
 Gunicorn部署django报异常 server closed the connection unexpectedly
mysql中的全文索引
 Linux介绍
 初步了解华为的MTL（市场到线索）流程的基本概念和来龙去脉
 单源最短路径问题（Java）
【VBA】基于EXCEL生成Insert语句工具
 第三届机器学习、云计算与智能挖掘国际会议（MLCCIM 2024）
软件工程专业毕设题目选题推荐
原文地址：https://blog.csdn.net/SSS4362/article/details/126802937