For...in遍历和for...of的用法

for…in循环 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）

遍历数组

var a=[1,2,3];
for(let i in a){
	console.log(i);//0 1 2
	console.log(a[i]);//1 2 3
}

遍历对象数组

let arr = [
    { name: '张三', age: 18, isFat: true },
    { name: '李四', age: 78, isFat: false },
    { name: '王五', age: 42, isFat: false },
    { name: '刘六', age: 14, isFat: true }
];
for (let i in arr) {
    console.log(i); // 0  1  2  3
}

遍历对象

let obj = {
    name: '小明', 
    age: 99,
    isFat: true,
    gender: "男"
}
for(let x in obj) {
    console.log(x);
}
//打印结果：(可见for...in循环遍历的是属性名，要得到属性值，用obj[x] )
//name
//age
//isFat
//gender

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

遍历数组

var a=[1,2,3];
for(let i of a){
	console.log(i);//1 2 3
}

遍历对象数组

let arr = [
    { name: '张三', age: 18, isFat: true },
    { name: '李四', age: 78, isFat: false },
    { name: '王五', age: 42, isFat: false },
    { name: '刘六', age: 14, isFat: true }
];
for (let i of arr) {
    console.log(i); 
}
//打印结果：
// { name: '张三', age: 18, isFat: true },
// { name: '李四', age: 78, isFat: false },
// { name: '王五', age: 42, isFat: false },
// { name: '刘六', age: 14, isFat: true }

for of 直接遍历对象会报错，不能用来遍历对象

原因：
ES6 中引入了 Iterator，只有提供了 Iterator 接口的数据类型才可以使用 for-of 来循环遍历，而 Array、Set、Map、某些类数组如 arguments 等数据类型都默认提供了 Iterator 接口，所以它们可以使用 for-of 来进行遍历。

ES6 同时提供了 Symbol.iterator 属性，只要一个数据结构有这个属性，就会被视为有 Iterator 接口。