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

最新推荐文章于 2023-06-07 09:06:06 发布

原创最新推荐文章于 2023-06-07 09:06:06 发布 · 461 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html

这篇博客探讨了JavaScript中for、for...in和for...of循环的区别和用法。for循环适用于遍历数组，但不能直接遍历对象，因为对象没有内置迭代器。可以通过Object.keys方法间接遍历对象。for...in循环适用于遍历对象的属性，而for...of主要用于遍历数组，尝试遍历对象时会报错。解决对象遍历问题的方法是使用Object.keys配合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])的值如下图:
在这里插入图片描述