【JS学习】for-in与for-of

最新推荐文章于 2024-04-16 10:03:08 发布

笙烛

最新推荐文章于 2024-04-16 10:03:08 发布

阅读量159

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42477843/article/details/112547094

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

- - - 总述：
    - 使用效果：

前言：本博客系列为学习后盾人js教程过程中的记录与产出，如果对你有帮助，欢迎关注，点赞，分享。不足之处也欢迎指正，作者会积极思考与改正。

总述：

名称	遍历	适用
for-in	索引	主要建议白能力对象，不介意遍历数组
for-of	值	可用于遍历数组，字符串，映射，集合等，无法遍历对象

使用效果：

for-in遍历中得到的是每一项的索引；for-of得到的是每一项的值

//案列一:操作数组
let arr=['a','b','c','d'];
            //for-in遍历数组
            for(let index in arr){
                console.log(index);//遍历下标0,1,2,3
                console.log(arr[index]);//遍历数组'a','b','c','d'
            }
            //for-of遍历数组
            for(let value of arr){
                console.log(value);//遍历数组'a','b','c','d'
            }
            
            let obj={
                key1:"a",
                key2:"b"

            }
            //for-in遍历数组
            for(let index in obj){
                console.log(index);//遍历下标0,1,2,3
                console.log(obj[index]);//遍历数组'a','b','c','d'
            }
            //for-of遍历数组
            for(let value of obj){
                console.log(value);//报错obj is not iterable
            }
//案例二:操作对象for-in可以  for-of不行，本质是迭代器
let obj={
                key1:"a",
                key2:"b"

            }
            //for-in遍历数组
            for(let index in obj){
                console.log(index);//遍历下标0,1,2,3
                console.log(obj[index]);//遍历数组'a','b','c','d'
            }
            //for-of遍历数组
            for(let value of obj){
                console.log(value);//报错obj is not iterable
            }
 
//for-of还可以遍历DOM元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <main>
            <ul>
                <li></li>
                <li> </li>
            </ul>

        </main>
        <script>
            let lis=document.querySelectorAll("li");//找到都没中的所有li队形打包成数组
            for(let li of lis){//遍历所有li对象
                li.innerHTML="a";//给li对象加如内容a
            } 
           
        </script>
    </body>
</html>