前言：本博客系列为学习后盾人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>

尾记：

有任何问题，欢迎私聊哟~~~

也可关注公众号“诗与凉风”联系作者哦~~

【JS学习】for-in与for-of的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

  10. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

随机推荐

  1. 【CH 弱省互测 Round #1 】OVOO（可持久化可并堆）

    Description 给定一颗 \(n\) 个点的树,带边权. 你可以选出一个包含 \(1\) 顶点的连通块,连通块的权值为连接块内这些点的边权和. 求一种选法,使得这个选法的权值是所有选法中第 \ ...

  2. Go语言(1)——程序结构

    程序结构 基础部分仅仅列举和其他语言不一样的地方(C语言为例). 声明 Go语言有四个主要声明:var.const.type.func,类似于C语言中的变量,常量,结构体和函数. package ma ...

  3. [日常摸鱼]bzoj2463 [中山市选2009]谁能赢呢？

    题意:两个人在$n*n$的棋盘上玩游戏,一开始棋子在左上角,可以上下左右的走到没有走过的地方,最后不能走的那个输,两个人都采取最优决策问哪个赢 猜结论!$n$为偶数则先手赢,否则后手赢. 考虑用$1* ...

  4. 【英雄帖】FreeRedis 邀请您一起优化项目。

    嘿!各位!自 FreeRedis 开库以来,相继出现了很多贡献者,我们正在对 FreeRedis 的各功能模块做优化,这并不意味着现版的 FreeRedis 有问题,我们只是希望在某些方面做得更好.如 ...

  5. 个人微信公众号搭建Python实现 -个人公众号搭建-总结（14.3.6)

    @ 目录 1.主要技术:Flask,requests 2.实现的主要功能 3.目录说明 4.运行方式 关于作者 1.主要技术:Flask,requests requirements.txt如下 req ...

  6. Mysql主从数据库(master/slave)，实现读写分离

    在之前的一篇文章中,阐述了如何在高并发高负载的场景下使用nginx做后台服务的负载均衡:在阿里云Centos上配置nginx+uwsgi+负载均衡配置,但是不要以为这样做了就是一劳永逸的,到了数据业务 ...

  7. 庐山真面目之九微服务架构 NetCore 基于 Docker 基础镜像和挂载文件部署

    庐山真面目之九微服务架构 NetCore 基于 Docker 基础镜像和挂载文件部署 一.简介      我们在上一篇文章<庐山真面目之八微服务架构 NetCore 基于 Dockerfile ...

  8. HCIP --- BGP 总结

    AS:自治系统  --逻辑管理域(例如移动.电信.联通),AS号范围:0-65535,其中,1-64511:公有AS,64512-65535:私有AS IGP:内部网关协议,在一个AS之内传递的路由协 ...

  9. Windows系统/office安装与激活

    一.Windows安装与激活 1.Windows7/8/10安装 提示:       重装系统时C盘会被格式化,故在重装系统前请先手动将重要资料转移到其他地方: 制作一个大白菜U盘winpe启动盘 查 ...

  10. JQuery生成二维码，有资源下载

    原文链接:http://www.yxxrui.cn/article/65.shtml 没时间或者懒得看的,可以直接看加粗部分(或试试手感▼). 使用jquery.qrcode来生成二维码,qrcode ...