for..of..each..in

forEach

forEach用来遍历数组，用forEach有以下特征：

• 相比于for循环，形式更加简洁
• 没有返回值
• 不能使用break、continue来控制循环
• 若使用return，则会跳过当前循环，直接进入下一个循环，不会跳出外层函数

在forEach中，使用break或continue，会直接报错：

const arr = [0, 1, 2, 3, 4, 5];

arr.forEach((item, index) => {
    if (index === 2) break; // SyntaxError: Illegal break statement
    console.log(item);
});

如下代码，在index===2的时候，希望跳出test函数，然而实际上只是跳过了当前的循环：

const arr = [0, 1, 2, 3, 4, 5];

function test() {
    arr.forEach((item, index) => {
        if (index === 2) return;
        console.log(item);
    });
}

test();
// 0
// 1
// 3
// 4
// 5

for-in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

for (variable in object){
    ...
}

• variable：在每次迭代时，variable会被赋值为不同的key，即属性名。
• object：非Symbol类型的可枚举属性被迭代的对象。

使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性

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

function myObj() {
    this.name = 'Jack';
}

myObj.prototype = obj;

const user = new myObj();

for (const prop in user) {
    console.log(`user.${prop} = ${user[prop]}`);
}
// user.name = Jack
// user.a = 1
// user.b = 2
// user.c = 3

for (const prop in user) {
    if (user.hasOwnProperty(prop)) {
        console.log(`user.${prop} = ${user[prop]}`);
    }
}
// user.name = Jack

for-of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123

for (let value of arr) {
console.log(value)
}
//1 2 3

简单来说就是for in和for of它们两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value）

// for in
var obj = {a:1, b:2, c:3}

for (let key in obj) {
console.log(key)
}
// a b c
const array1 = ['a', 'b', 'c']

for (const val of array1) {
console.log(val)
}
// a b c

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）

总结

• forEach是数组的方法，遍历数组，没有返回值，不能使用break、continue，不能用return到跳出外层函数
• for...in语句以任意顺序迭代对象的键，包括原型。不建议与数组一起使用。大部分遍历对象

• for...of 语句遍历可迭代对象的值。（不能遍历对象）
• for in总是得到对象的key或数组、字符串的下标
• for of总是得到可迭代对象的value或数组、字符串的值