【JS】forEach，for in，for of的区别

forEach

它就是用来遍历数组的，并对数组的每一个元素执行一次提供的函数。

 //forEach  遍历数组，并对数组的每一个元素执行一次提供的函数
        const arr = [1, 2, 3, 4]
        arr.forEach(item => console.log(item))  //1 2 3 4

结果：

 for in

遍历键值，主要用于遍历对象。

语法：for(let key in 变量名) 。可以遍历数组，也可遍历对象。

遍历数组时的key表示数组索引号，变量名[key]表示元素。但不建议数组用这个，本来也就是为了遍历对象属性而构建的

遍历对象时key表示对象的属性名，变量名[key]表示对象的属性值。

  对象for in 如下：

  // for in 对象
        const obj = { name: 'chen', age: 18 }
        for (let key in obj) {
            console.log(`我是对象的key:${key}`);   //name  age
            console.log(`我是对象的obj[key]: ${obj[key]}`);   //chen  18
        }

结果：

数组for in如下：

 //for in 遍历数组
        const arr = ['a', 'b', 'c']
        for (let key in arr) {
            console.log(`我是数组的key: ${key}`)     //0 1 2 
            console.log(`我是数组的arr[k]: ${arr[key]}`)  // a b c
        }

结果：

for of

MDN官方说明：

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

对象不可使用for of：一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。对象没有Symbol.iterator属性 所以无法使用for of。

详情上代码：

 //for of 数组
        const arr = [5, 6, 7, 8]
        for (let k of arr) {
            console.log(k);   // 5 6 7 8
        }

   //for of 字符串
        const str = '好好学习'
        for (let k of str) {
            console.log(k);    //好 好 学 习
        }

 //for of 对象
        const obj = { sing: '唱歌', dance: "跳舞" }
        for (let k of obj) {
            console.log(k);    //报错，对象不能使用for of
        }

 结果