ES2015 for of 循环

一、为什么ES2015 引入 for of 循环

我们先来回想一下，ES2015以前与遍历相关的方法

• for循环：遍历普通的数组
• for in : 遍历键值对
• 一些函数式的遍历方法 ，比如forEach

这些遍历方式都有一定的局限性，比如说forEach() 不能退出循环

// for of 基本语法
const arr = [100,200,300,400]
for(const item of arr){
  console.log(item)
  if(item > 100){
    break  // for of 可以用退出循环
  }
}
arr.forEach() // 不能退出循环

// 为了能够终止遍历, 需要借用以下方法
arr.some() // return true 终止遍历
arr.every() // return false 终止遍历

ES2015引入了 for of 循环 ，作为遍历所有数据结构的统一方式

二、for of 循环基本使用

数组、伪数组、Set、Map 对象 都可以直接 用for of 遍历

const m = new Map()
m.set('foo',123)
m.set('bar',345)
for(const item of m){
  console.log(item)//item 键和值都会拿到 ['foo',123]
}
// 数组解构
for(const [key,value] of m){
  console.log(key,value)
}

for of 遍历对象可以吗？

const obj = {name:'jack'}
for(const item of obj){
  console.log(item)
}

诶？不是说 for of 循环可以作为遍历所有数据结构的统一方式吗？

为什么遍历对象报错了呢？

三、了解for…of 的内部原理

看下一篇文章： ES2015 Iterable（可迭代的）接口