for...in 、for...of 、forEach 的区别

//1、for in 循环
/=====================================/
//=>语法： for (variable in object) {...}
//for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。
//=> variable (变量)：每次迭代时，将不同的属性名分配给变量
//=> object (对象) ：被迭代枚举其属性的对象

var obj = {a:'A',b:'B',1:'c',2:'d',};
//obj对象有两个属性是数字，分别为1和2，值分别为'c'和'd'
for (var key in obj){
    //key存储的值为字符串类型的
   // console.log(typeof key); //=> string
    console.log(obj[key]);  // = > c d A B
}
// 结果为 =>c d A B ,  在 for in 循环遍历的时候，把对象的数字属性名排在前面
//并且排列的时候按照数字由小到大排列，非数字的属性名按照之前编写的顺序排列

//循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性
//for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性

var oobj = {a: 1, b: 2, c: 3};

function Fn() {
    this.color = 'red';
}
Fn.prototype = oobj;   //Fn的原型指向oobj这个对象

var obj2 = new Fn();    //new一个Fn这个构造函数的实例
console.log(obj2.a);    //obj2.a是obj2对象原型上的属性   = > 1

//obj.propertyIsEnumerable(prop) 方法返回一个布尔值，表示指定的属性是否可枚举。

console.log(obj2.propertyIsEnumerable('a'));    // => false  不可枚举,但是仍然可以遍历到
console.log(obj2.propertyIsEnumerable('color'));    //  = > true  可枚举
console.log(obj2.hasOwnProperty('color'));  //  => true

for (var prop in obj2) {
    console.log('obj2.' + prop + '=' + obj2[prop]);  //  =>  obj2.color=red  obj2.a=1  obj2.b=2  obj2.c=3
    //obj.hasOwnProperty(prop) 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
    //可以通过这个方法可以做条件判断，属性是私有的还是公有的，输出私有的属性
    if (obj2.hasOwnProperty(prop)) {
        console.log('obj2.' + prop + '=' + obj2[prop]);  // obj2.color=red
    }
}

// for...in不应该用于迭代一个 Array，其中索引顺序很重要
//数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。
//因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时，最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for...of 循环）。
/=====================================/

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

//语法： for (variable of object) {...} 相当于 for (let 值 of 数组 ) {...}
//variable表示值，object是一个定义了迭代行为的对象,如：数组

//遍历数组Array
let arr = [1, 2, 3];

for (let value of arr) {
    value += 1;
    console.log(value);   // => 2 3 4
}

//遍历String
let iterable = "abcd";

for (let value of iterable) {
    console.log(value);     // => a b c d
}

//遍历类数组对象arguments
(function() {
    for (let argument of arguments) {
        console.log(argument);  // 1 2 3
    }
})(1, 2, 3);

// 对于for...of的循环，可以由break, throw 或return终止
function* foo(){
    yield 1;
    yield 2;
    yield 3;
};

for (let o of foo()) {
    console.log(o);
    break; // closes iterator, triggers return
}

/=====================================/

//** 【 for...in 和 for...of 的区别】 **
//无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

//for...in 语句以原始插入顺序迭代对象的可枚举属性。
//for...of 语句遍历可迭代对象定义要迭代的数据。

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let arryNum = [3, 5, 7];
arryNum.foo = 'hello';

for (let i in arryNum) {
    console.log(i); // =>  0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in arryNum) {
    if (arryNum.hasOwnProperty(i)) {
        console.log(i); // => 0, 1, 2, "foo"
    }
}

for (let i of arryNum) {
    console.log(i); // =>  3, 5, 7
}

//3、Array.prototype.forEach() 对数组的每个元素执行一次提供的函数,相当于遍历数组中的每一项，对每一项执行一次函数
//语法：
/* array.forEach(callback(currentValue, index, array){
* //do something
* }, this)
*
* array.forEach(callback[, thisArg])
* /

//回调函数callback 为数组中每个元素执行的函数，该函数接收三个参数
//currentValue -> 数组中正在处理的当前元素。
//index可选 -> 数组中正在处理的当前元素的索引
//array可选 ->forEach()方法正在操作的数组。
//thisArg可选 ->可选参数。当执行回调 函数时用作this的值(参考对象)。

// forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。
// callback 函数会被依次传入三个参数：数组当前项的值、数组当前项的索引、数组对象本身

参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach