for in是ES5标准,for of是ES6标准;

for in是遍历对象属性,for of是遍历对象元素。

for of兼容性还不够,移动端安卓微信浏览器貌似不支持,苹果的可以;web端IE支持也不够,chrome可以。

先说结论:

  1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of

  2. for...in循环出的是key,for...of循环出的是value

  3. 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

  4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

var student={
name:'wujunchuan',
age:,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(let key in student){
console.log(key); //输出的是属性
console.log(student[key]); //输出的是属性值
} //name age locate
var student={
name:'wujunchuan',
age:,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(let key of Object.keys(student)){
console.log(key); //使用Object.keys()方法获取对象key的数组
console.log(student[key]) ;//输出的是属性值
}
var arr= ['a','b','c']
for(let key in arr){
console.log(key);//输出的是 键名 0 1 2
console.log(arr[key]);//输出的是 键值 a b c
}
var arr= ['a','b','c','d','e']
for(let value of arr){
console.log(value);//输出的是 键值 a b c d e
}
var arr= ['a','b','c','d','e']
for(let key of arr.keys()){
console.log(key);//输出的是键名 0 1 2 3 4
}
var arr= ['a','b']
for(let case of arr.entries()){
console.log(case);//输出的是键值对 [0,'a'] [1,'b']
}

javascript总for of和for in的区别?的更多相关文章

  1. javascript中apply、call和bind的区别,容量理解,值得转!

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  2. javascript中三目运算符和if else有什么区别

    javascript中三目运算符和if else有什么区别今天写了一个图片轮播的小demo,用到了判断先试了一下if else,代码如下:if(n >= count-1){n =0;}else{ ...

  3. JavaScript中var和this定义变量的区别

    JavaScript中var和this定义变量的区别 在js中声明变量时可以使用var和this,但使用this的有很大一部分参考书是没有的,经过查阅相关资料总结如下: 用var和this声明变量,存 ...

  4. javascript中back(-1)和go(-1)的区别

    javascript中back(-1)和go(-1)的区别 一.总结 一句话总结: 数据 history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1 ...

  5. JavaScript中基本数据类型和引用数据类型的区别(栈——堆)

    JavaScript中基本数据类型和引用数据类型的区别 1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据 ...

  6. javascript总述

    一.JavaScript核心 一个完整的JavaScript应该由下列三个不同的部分组成. 1.核心(ECMAScript) 2.文档对象模型(DOM,Document Object Model) 3 ...

  7. JavaScript 中 Number()、parseInt()、parseFloat()的区别

    Number(): 概述:Number 对象由 Number() 构造器创建,是经过封装的能让你处理数字值的对象.在非构造器上下文中 (如:没有 new 操作符),Number 能被用来执行类型转换. ...

  8. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  9. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

随机推荐

  1. linux关于yum

    yum仓库设置:1.cd /etc/yum.repos.d yum仓库 2.CentOS-Base.repo 网络源 CentOS-Media.repo 光盘源 设置 vi CentOS-Media. ...

  2. Leetcode 81. 搜索旋转排序数组 II

    题目链接 https://leetcode-cn.com/problems/search-in-rotated-sorted-array-ii/description/ 题目描述 假设按照升序排序的数 ...

  3. c++,友元类和友元函数

    都是声明时友元的东西可以访问自己类的私有和保护成员 类的友元 友元是C++提供的一种破坏数据封装和数据隐藏的机制. 通过将一个模块声明为另一个模块的友元,一个模块能够引用到另一个模块中本是被隐藏的信息 ...

  4. Linux学习-逻辑滚动条管理员 (Logical Volume Manager)

    LVM 可以整合多个实体 partition 在一起, 让这些 partitions 看起来就像是一个磁盘一样!而且,还可以在未来新增或移除其他的实 体 partition 到这个 LVM 管理的磁盘 ...

  5. PYday16&17-设计模式\选课系统习题

    1.设计模式:对程序做整体得规划设计,这样做是为了更好的实现功能,使代码的可扩展性更好有27种常见的设计模式.流行的设计模式参考书:GoF设计模式.大话设计模式设计模式是为了更好的实现模块间的解耦,便 ...

  6. 《完美应用Ubuntu》第3版 何晓龙 著

    系统篇 用好Ubuntu掌握这些就够了 第1章 Ubuntu的进化 1.1 GNU/Linux的历史和文化 1.1.1 GNU/Linux是Linux的全称 1.1.2 Linux的诞生 1.2 Li ...

  7. poj2135最小费用最大流经典模板题

    Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13509   Accepted: 5125 Descri ...

  8. RabbitMQ与PHP(一)

    RabbitMQ与PHP(一) 项目中使用RabbitMQ作为队列处理用户消息通知,消息由前端PHP代码产生,处理消息使用Python,这就导致代码一致性问题,调整消息定义时需要PHP和Python都 ...

  9. Welcome-to-Swift-05控制流(Control Flow )

    Swift提供了所有c类语言的控制流结构.包括for和while循环来执行一个任务多次:if和switch语句来执行确定的条件下不同的分支的代码:break和continue关键字能将运行流程转到你代 ...

  10. [LOJ#522]「LibreOJ β Round #3」绯色 IOI(危机)

    [LOJ#522]「LibreOJ β Round #3」绯色 IOI(危机) 试题描述 IOI 的比赛开始了.Jsp 和 Rlc 坐在一个角落,这时他们听到了一个异样的声音 …… 接着他们发现自己收 ...