js 遍历数组、对象

快来打我* 2021-08-30 22:50 589阅读 0赞

上一篇文章（[https://blog.csdn.net/liuxiao723846/article/details/106857447][https_blog.csdn.net_liuxiao723846_article_details_106857447]）介绍了使用forEach等方法遍历数组（不能遍历对象），我们知道，这几种方法都不支持break、continue关键字，也不支持遍历对象。接下来，我们学习如何解决这类问题。

**1、使用keys()方法，将对象转成数组，然后遍历：**

var obj1 = {"a":1,"b":2,"c":3};
    Object.keys(obj1).forEach((v,i,arr) => {
      console.log("param:v:"+v+",i:"+i+",arr:"+arr);
      console.log("val:"+obj1[v]);
    });
    
    //输出：
    param:v:a,i:0,arr:a,b,c
    val:1
    param:v:b,i:1,arr:a,b,c
    val:2
    param:v:c,i:2,arr:a,b,c
    val:3

**2、for in 语法：**

for in 中支持遍历数组、对象，而且支持breank、continue。

1）遍历对象：

var obj2 = {"a":2,"b":3,"c":4};
    for (var v in obj2) {
      console.log("v:"+v+",value:"+obj2[v]);
    }
    //输出：
    v:a,value:2
    v:b,value:3
    v:c,value:4

2）遍历数组：

var arr1 = [99,2,56,5,0];
    for (var v in arr1){
      console.log("v:"+v+",value:"+arr1[v]);
    }
    //输出：
    v:0,value:99
    v:1,value:2
    v:2,value:56
    v:3,value:5
    v:4,value:0

注：for in 遍历时，每次迭代返回的是数组下标。

**3、for of语法：**

只支持遍历数组，并且遍历时直接返回的是值（不像for in返回的是下标）。for of遍历时保证顺序（for in不一定）

var arr2 = [99,2,56,5,0];
    for (var v of arr2) {
      console.log(v);
    }
    //输出
    99
    2
    56
    5
    0

参考：

[https://juejin.im/post/5aea83c86fb9a07aae15013b][https_juejin.im_post_5aea83c86fb9a07aae15013b]

[https://juejin.im/entry/5a1654e951882554b8373622][https_juejin.im_entry_5a1654e951882554b8373622]

[https_blog.csdn.net_liuxiao723846_article_details_106857447]: https://blog.csdn.net/liuxiao723846/article/details/106857447
[https_juejin.im_post_5aea83c86fb9a07aae15013b]: https://juejin.im/post/5aea83c86fb9a07aae15013b
[https_juejin.im_entry_5a1654e951882554b8373622]: https://juejin.im/entry/5a1654e951882554b8373622