for…in…和for…of…及forEach()

首先，在数组中：

for…in循环读取键名（数组的索引、对象的key或数组、字符串的下标），

for…of循环读取键值（数组的元素值、对象的value或数组、字符串的值，另外还可以用于遍历Map和Set）。如果要通过for…of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法

var arr = ['a', 'b', 'c', 'd'];

        for (let a in arr) {
          console.log(a); // 0 1 2 3
        }

        for (let a of arr) {
          console.log(a); // a b c d
        }
　

定义：

（1）for-in循环主要用于遍历对象，for()中的格式：for(keys in zhangsan){}
keys表示obj对象的每一个键值对的键！！所有循环中，需要使用obj[keys]来取到每一个值！！！for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性。

（2）ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for…of循环，作为遍历所有数据结构的统一的方法。
　　一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法。
　　for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串

让对象可以使用 for of循环通过使用 Object.keys() 获取对象的 key值集合后,再使用 for of实现

 const obj = {
        a: 1,
        b: 2,
        c: 3
    }

    for (let i of Object.keys(obj)) {
        console.log(i)
        // 1
        // 2
        // 3
    }

补充：（与其他循环比较

for…in循环有几个缺点
　　①数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
　　②for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
　　③某些情况下，for…in循环会以任意顺序遍历键名。
　　for…in循环主要是为遍历对象而设计的，不适用于遍历数组。

for…of循环
　　有着同for…in一样的简洁语法，但是没有for…in那些缺点。
　　不同于forEach方法，它可以与break、continue和return配合使用。
　　提供了遍历所有数据结构的统一操作接口

 

forEach:

（定义）：forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。  forEach() 对于空数组是不会执行回调函数的。

（语法）：array.forEach(function(currentValue, index, arr), thisValue)

（参数）：

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数: 参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

 forEach 并不改变原数组：

var arr = [1, 2, 3, 4, 5];
var a=arr.forEach(function(value,index,arr){
    value=value+7
    console.log(value+" "+index+" "+arr)
},3)

console.log(a)
console.log(arr.toString())

结果：
8 0 1,2,3,4,5
9 1 1,2,3,4,5
10 2 1,2,3,4,5
11 3 1,2,3,4,5
12 4 1,2,3,4,5
undefined
1,2,3,4,5

借鉴：(1条消息) for-in 和 for-of 的区别_一颗苹果1995的博客-优快云博客_forin和forof区别

for in 和 for of 的区别 - 随心小宝 - 博客园 (cnblogs.com)

百度前端面试题：for in 和 for of的区别详解以及为for in的输出顺序 - 知乎 (zhihu.com)

JavaScript forEach() 方法 | 菜鸟教程 (runoob.com)