一、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. RocketMQ - 消费者概述

    消费流程 消费者组: 一个逻辑概念,在使用消费者时需要指定一个组名.一个消费者组可以订阅多个Topic. 消费者实例: 一个消费者组程序部署了多个进程,每个进程都可以称为一个消费者实例. 订阅关系: ...

  2. shell 命令小记

    if [ -d /abc ] if与后面括号要有空格 中括号与内部的变量也要有空格 for header in `ls *.h` do cp $header /usr/include/mymuduo ...

  3. left join(一)

    例表aaid adate1 a12 a23 a3 表bbid bdate1 b12 b24 b4 两个表a,b相连接,要取出id相同的字段select * from a inner join b on ...

  4. Linux操作命令(八)1.sort命令 2.uniq命令 3.join命令

    1.sort,排序 常用参数 参数 描述 -n 基于字符串的长度来排序,使用此选项允许根据数字值排序,而不是字母值 -k 指定排序关键字 -b 默认情况下,对整行进行排序,从每行的第一个字符开始.这个 ...

  5. Linux操作命令(五)1.find命令 2.xargs命令

    1.find命令(一) 查找,沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作 参数 描述 -print find 命令将匹配的文件输出到标准输出 -exec find 命令对匹配的文件 ...

  6. 面试笔记1-redis

    1.什么是RDB? RDB实际上是Redis的一种数据持久化机制.它每隔一段时间就会把内存中的数据写入到磁盘中的临时文件,作为快照,宕机重启之后,就会把rdb文件读取到内存中去,就可以恢复数据. 2. ...

  7. [网鼎杯2020]you_raise_me_up

    [网鼎杯2020]you_raise_me_up 目录 [网鼎杯2020]you_raise_me_up 题目 分析 解法一:sage discrete_log()使用示例 补充 解法二:python ...

  8. 3.2 删除XxxControler中各方法中的response

    3.2.1 EmpController代码 package com.hy.controller; import javax.servlet.http.HttpServletRequest; impor ...

  9. C - Functions again CodeForces - 789C

    C - Functions again CodeForces - 789C 这道题考查了对Map的运用 #include<iostream> #include<cstdio> ...

  10. input输入框限制输入

    <input type="password" value="" id="pwd" class="Rectangle-1188 ...