解析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.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.1.3 示例代码运行截图

在这里插入图片描述

1.2 当遍历字符串时

1.2.1 核心语法
for (const item in str) {
    //str是字符串
    console.log("str字符串的第"+(Number(item)+1)+"个字符的值为: "+str[item]);
}
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 示例代码运行截图

在这里插入图片描述

1.3 当遍历对象时

1.3.1 核心语法
for (const item in obj) {
    //其中obj是对象,item是键值对中的键(冒号前面的那部分)
     console.log(item+"的值为"+obj[item]);
}
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.3.3 示例代码运行截图

在这里插入图片描述

2 for of篇

2.1 当遍历数组时

2.1.1 核心语法
for (const iterator of arr) {
   //for of是相当于获取值,没有下标(类似java中的foreach)
   console.log(iterator);
}
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>
2.1.3 示例代码运行截图

在这里插入图片描述

2.2 当遍历字符串时

2.2.1 核心语法
 for (const iterator of str) {
   //for of是相当于获取值,没有下标,str是字符串
   console.log(iterator);
}
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>
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>

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

3.2 使用小贴士

当遍历对象时,采用for in

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

# javascript # 前端 # 开发语言
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

软考中级-软件设计师 UML图详解（ 类图，对象图，用例图，序列图，通信图，状态图，活动图，构件图，部署图）

avatar 2048 AI社区
cover

机器学习 决策树-分类

avatar 2048 AI社区
cover

【SD教程】超详细AI绘画提示词语法讲解！

avatar 2048 AI社区