一、for....of

  1.for…of是作为ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构(数组、对象等)并且返回各项的值,普通的对象用for…of遍历是会报错的。

  2.for...of 循环只能用来遍历数组、类数组对象,字符串、Set、Map 以及 Generator 对象

二、for...in(遍历出来的都为可枚举属性)

  1.for...in 循环主要是为了遍历对象可枚举属性而生,不推荐于遍历数组,遍历数组返回的是数组索引

三、可枚举属性

  1.用户定义的属性都是可枚举的,而内置对象不可枚举

  2.obj.name、obj.prototype.name添加的属性可枚举,defineProperty不可枚举

1、for...in 循环:只能获得对象的键名,不能获得键值

for...of 循环:允许遍历获得键值

var arr = ['red', 'green', 'blue']

for(let item in arr) {
console.log('for in item', item)
}
/*
for in item 0
for in item 1
for in item 2
*/ for(let item of arr) {
console.log('for of item', item)
}
/*
for of item red
for of item green
for of item blue
*/

2、对于普通对象,没有部署原生的 iterator 接口,直接使用 for...of 会报错

var obj = {
'name': 'Jim Green',
'age': 12
} for(let key of obj) {
console.log('for of obj', key)
}
// Uncaught TypeError: obj is not iterable

可以使用 for...in 循环遍历键名

for(let key in obj) {
console.log('for in key', key)
}
/*
for in key name
for in key age
*/

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组,然后遍历这个数组

for(let key of Object.keys(obj)) {
console.log('key', key)
}
/*
key name
key age
*/

3、for...in 循环不仅遍历数字键名,还会遍历手动添加的其它键,甚至包括原型链上的键。for...of 则不会这样

let arr = [1, 2, 3]
arr.set = 'world' // 手动添加的键
Array.prototype.name = 'hello' // 原型链上的键 for(let item in arr) {
console.log('item', item)
} /*
item 0
item 1
item 2
item set
item name
*/ for(let value of arr) {
console.log('value', value)
} /*
value 1
value 2
value 3
*/

4、forEach 循环无法中途跳出,break 命令或 return 命令都不能奏效

let arr = [1, 2, 3, 5, 9]
arr.forEach(item => {
if(item % 2 === 0) {
return
}
console.log('item', item)
})
/*
item 1
item 3
item 5
item 9
*/

for...of 循环可以与break、continue 和 return 配合使用,跳出循环

for(let item of arr) {
if(item % 2 === 0) {
break
}
console.log('item', item)
}
// item 1

5、无论是 for...in 还是 for...of 都不能遍历出 Symbol 类型的值,遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

{
let a = Symbol('a')
let b = Symbol('b') let obj = {
[a]: 'hello',
[b]: 'world',
c: 'es6',
d: 'dom'
} for(let key in obj) {
console.info(key + ' --> ' + obj[key])
} /*
c --> es6
d --> dom
*/ let objSymbols = Object.getOwnPropertySymbols(obj)
console.info(objSymbols) //  [Symbol(a), Symbol(b)]
objSymbols.forEach(item => {
console.info(item.toString() + ' --> ' + obj[item])
}) /*
Symbol(a) --> hello
Symbol(b) --> world
*/ // Reflect.ownKeys 方法可以返回所有类型的键名,包括常规键名和Symbol键名
let keyArray = Reflect.ownKeys(obj)
console.log(keyArray) //  ["c", "d", Symbol(a), Symbol(b)]
}

for in 和 for of 的区别(枚举解释)的更多相关文章

  1. apt与apt-get命令的区别与解释

    [apt与apt-get命令的区别与解释] Ubuntu 16.04 发布时,一个引人注目的新特性便是 apt 命令的引入.其实早在 2014 年,apt 命令就已经发布了第一个稳定版,只是直到 20 ...

  2. IEnumerable< T >和IEnumerable区别 |枚举接口

    为什么我们在继承IEnumerable< T >接口的时候也要实现IEnumerable接口. 新的代码里面都用IEnumerable< T >,因为泛型的类型是安全的.我们可 ...

  3. 管道命令和xargs的区别(经典解释)

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现"将前面的标准输出 ...

  4. Linux中apt与apt-get命令的区别与解释

    2019-01-15 14:35:39 随着 apt install package 命令的使用频率和普遍性逐步超过 apt-get install package,越来越多的其它 Linux 发行版 ...

  5. (转载)管道命令和xargs的区别(经典解释)

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道:懒蜗牛Gentoo 写道:管道是实现“将前面的标准输出作为后面的标准 ...

  6. 管道命令和xargs的区别(经典解释) 自己的总结

    1. 简介 之所以能用到这个命令,关键是由于很多命令不支 持|管道来传递参数,而日常工作中有有这个必要, 所以就有了xargs命令,例如:find /sbin -perm +700 |ls -l 这个 ...

  7. 对std::string和std::wstring区别的解释,807个赞同,有例子

    807down vote string? wstring? std::string is a basic_string templated on a char, and std::wstring on ...

  8. PO,VO,DAO,BO,POJO之间的区别与解释

    VO value object:值对象 通常用于业务层之间的数据传递,由new创建,由GC回收. PO persistant object:持久层对象 对应数据库中表的字段. VO和PO,都是属性加上 ...

  9. Java 中 VO、PO、DTO、BO、POJO、DAO 之间的区别与解释

    转载:https://www.cnblogs.com/hunmeng/p/11298680.html VO value object:值对象 通常用于业务层之间的数据传递,由new创建,由GC回收. ...

  10. Java之枚举

    1.定义 enum 是一种数据类型,与 全局常量比较相似,都是全局的并且是可以通过类名调用的 与全局常量区别 枚举功能更强大,可以有属性和方法 枚举比全局常量更加的规范 2.枚举特性 1)可以有属性以 ...

随机推荐

  1. Cesium计算三角形面积(十)

    function triangleArea(p0, p1, p2) { //利用subtract计算出两个向量 let v0=Cesium.Cartesian3.subtract(p0,p1,newC ...

  2. Cobalt Strike 之:提权

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. Co ...

  3. docker-compose部署rocketmq

    docker-compose安装: 1.从github上下载docker-compose二进制文件安装 Ubuntu下载docker-compose文件 sudo curl -L https://gi ...

  4. sudo漏洞解决方案--源码转rpm包(spec文件编写)

    RPM 知识储备 将源码包打包成rpm包,一般有两种情况 在找包中,能够在网上找到 ".src.rpm" 结尾的包,并且是根据漏洞需要升级的版本的包 在找包中,没有找到 " ...

  5. Android悬浮窗全屏不获取焦点但是可以漏出软键盘的办法

    addFlags( WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);的作用是在不获取焦点的时候显示软键盘. 接触这个标记 getWindow().c ...

  6. 四点DLT (Direct Linear Transformation) 算法

    \(\mathrm{x}_{i}\) 表示变化前的齐次坐标 \(\mathbf{x}_{i}^{\prime}\) 表示变化后的齐次坐标 我们需要求到一个 \(3\times3\) 的变换矩阵 \(\ ...

  7. linux命令行大量零碎练习习题集-打包未整理

    linux命令行大量零碎练习习题集-打包未整理最近看完了一本linux书籍,想着做题来检测和巩固一下,于是打算去买本linux命令集习题去做做.但是没有找到相关的书籍,于是只能在网上随便找找.但是很多 ...

  8. 面向对象基础之基础—控制台C#模拟银行ATM存取操作实例

    c#控制台应用程序ATM银行操作实例.主要介绍了设计的方法:使用的类介绍:具体的运行界面:程序代码.代码直接写在一起放在Programm.cs中,拷贝可直接运行. 一.设计 1.原则上采用三层:(1) ...

  9. Django路由重定向

    路由重定向又称HTTP协议重定向,也可以称为网页跳转,它对应的HTTP状态码为301.302.303.307.308. 网页重定向就是在浏览器访问某个网页的时候,这个网页不提供响应内容,而是自动跳转到 ...

  10. Linux系统实时监控

    命令 top   Top命令用于实时显示process的动态.参数如下:   d:设置显示的更新速度   q:无延迟的显示速度   c:切换显示模式,一共有两种显示模式,一是只显示执行档,另一种是显示 ...