ES6 for..in 和 for...of 和 for循环

for循环：

for循环 可以用于 遍历数组 但是不能直接循环对象 是是因为对象中没有 迭代器 ( 迭代器可以去上官网了解一下,本人也不是很懂) 但是可以间接的去遍历 使用 Object.keys 这个方法 对象键 组成的 迭代器

演示一下for循环的使用

var arr = [1, 2, 3, 4, 5, 6]
    for (var i = 0; i < arr.length; i++){
        console.log(arr[i]) 
    }

效果图

可以遍历数组没毛病,可不可以遍历对象,试验一下

代码图

效果图
空空如也,不行啊

for…in:

for…in遍历数组

 var arr = [1,2,3,4,5,6]
 for (var x in arr) {
        console.log(x, "------", arr[x]);
    }

结果图

for…in遍历对象

var obj = {
        name: "张三",
        age: 30,
        sex: "男"
    }
    for (var key in obj) {
        console.log(key,"----",obj[key]);
    }

结果图

for…of :

for…of 遍历数组

var arr = [1,2,3,4,5,6]
 for(var item of arr){
     console.log(item) 
 }

结果图

for…of 遍历对象 (会报错)

 var obj = {
        name: "张三",
        age: 30,
        sex: "男"
    }
    for(var item of obj){
     console.log(item) //obj is not iterable
 }

结果图
迭代器的问题 对象里面没有迭代器

解决方法

使用 object.keys
代码

var obj = {
        name: "张三",
        age: 30,
        sex: "男"
    }
    
    var res = Object.keys(obj)
    for(var key of Object.keys(obj)){
            console.log(key) // ['name', 'age', 'sex']
            console.log(obj[key]) 
    }

最后console.log(obj[key])的值如下图: