forof、forin、foreach的区别

通过遍历对象（Objeact）、数组、Set和Map比较他们之间的区别。

结论：

forEach、map和filter能遍历数组,forEach能直接遍历Map、Set。map和 filter只能通过扩展运算符转成数组后遍历;

for…in能遍历对象和数组，但是不能直接遍历Map和Set,但是可以通过扩展运算符转成数组后遍历;

for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

var obj = {
	      a: 1,
	      b: 2,
	      c: 3
	}
    var arr = [9, 8, 7]
           

1. 对象

// for...in 可以遍历数组和对象
    for (var i in obj) {
      console.log(i)
    }

    // for...of 只能遍历数组，类数组。  
    try {
      for (var v of obj) {
        console.log(v)
      }
    } catch {
      console.error('for...of 只能遍历数组。')
    }
           

1. 数组

for (var i in arr) {
      console.log(i)
    }
    for (var v of arr) {
      console.log(v)
    }
           

1. Set

Set是ES6新提供的数据类型，它类似于数组，但是成员的值都是唯一的，没有重复的值。

let setArr = new Set(arr)
    console.log(setArr)

    // for...in不可以遍历Set,会直接跳过
    for (var i in setArr) {
      console.log(i)
    }
    // forEach可以遍历Set,但是map和filter方法不能直接遍历。。
    console.log('开始forEach遍历')
    setArr.forEach(item => {
      console.log(item)
    })
    try {
      setArr.map(item => {
        console.log(item)
      })
      // setArr.filter(item => {
      //   console.log(item)
      // })
    } catch {
      console.error('map方法不能直接遍历Set')
      // console.error('filter方法不能直接遍历Set')
    }
    // 但可以转成数组后遍历 -_,-
    [...setArr].map(item => {
      console.log(item)
    })

    // for...of可以遍历Set
    console.log('开始for...of遍历')
    for (var v of setArr) {
      console.log(v)
    }
           

1. Map

ES6新的数据结构Map，是为了解决对象的键名只能是字符串的形式。Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

var m = new Map([
      [1, 2],
      [2, 4]
    ])
    // 下列是实际问题
    var o = {}
    var c = {
      a: 1
    }
    o[c] = 1
    console.log(o) //[object Object]: 1

    // Map也可以这样赋值和获取值。
    m.set(3, 6)
    console.log(m.get(1))
    console.log(m)

    // for...in不可以遍历Map
    for (var i in m) {
      console.log(i)
    }
    // for...of可以遍历Map
    for (var v of m) {
      console.log(v)
    }
    // forEach可以遍历Map
    m.forEach(item => {
      console.log(item)
    })