前言：本博客系列为学习后盾人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. 基于Dokcer搭建Redis集群搭建（主从集群）

    最近陆陆续续有不少园友加我好友咨询 redis 集群搭建的问题,我觉得之前写的这篇 <基于Docker的Redis集群搭建> 文章一定是有问题了,所以我花了几分钟浏览之前的文章总结了下面几 ...

  2. Java程序执行过程及内存机制

    本讲将介绍Java代码是如何一步步运行起来的,其中涉及的编译器,类加载器,字节码校验器,解释器和JIT编译器在整个过程中是发挥着怎样的作用.此外还会介绍Java程序所占用的内存是被如何管理的:堆.栈和 ...

  3. uni-app微信小程序登录授权

    微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@g ...

  4. 程序员必读的 99 本书籍 & 资源

    作为程序员,始终要保持学习,一直带着纸质书还是很不便的,因此电子书对于我们还是挺需要的.为了方便广大的小伙伴也能方便找到对应的电子书,我花费洪荒之力从各个搜索网站收集了几百本常用的电子书,找到了,我要 ...

  5. 初始Node

    node是什么? ​ 一句话: 服务器 什么是服务器: ​ 一句话: 客户端访问 并且能够响应 为什么: ​ 一句话: 执行效率高 #安装 #控制台 切换磁盘: e: 改变目录: cd 目录 cd.. ...

  6. 多任务-python实现-使用队列完成进程间的通信（2.1.8）

    @ 目录 1.为什么要使用队列 2.python代码实现 1.为什么要使用队列 进程之间是互相独立的,而线程能够共享全局变量 所以如果进程间想要交换数据的话 只有通过进程间的通信,比如socket.太 ...

  7. openstack高可用集群16-ceph介绍和部署

    Ceph Ceph是一个可靠.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备和文件系统服务.块设备存储是Ceph的强项. Ceph的主要优点是分布式 ...

  8. Python机器学习课程：线性回归算法

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 最基本的机器学习算法必须是具有单个变量的线性回归算法.如今,可用的高级机器学习算法,库和技术如此之多 ...

  9. Mysql5.7.20安装手记

    Mysql到5.7之后安装较之前有了很大的不同,特别是解压缩版,可能安装速度较之前有所减少,但对于我们这种一直使用5.5的我来说不知道步骤还真是挺费劲的.下面详细记一下我安装的过程. 1.下载mysq ...

  10. 扫描条形码获取商品信息（iOS 开发）

    一.导入ZBarSDK及其依赖库(这不是本文侧重点)     1.下载地址 https://github.com/bmorton/ZBarSDK     2.导入头文件 #import "Z ...