文中的范例基于以下数组和对象。 var arrTmp = ["value1","value2","value3"]; var objTmp = { aa:"value1", bb:"value2", cc:function(){ console.log("value3") } } 一、JS原生方法 1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上了forEach方法(IE9以下不支持)。 /****js原生遍历****/ //for循环遍历数组 for(var i=0;i<arrTmp.length;i++){ con 在JavaScript中,数组和对象的遍历是编程中常见的任务,尤其在处理数据或执行操作时。本篇文章将深入探讨几种不同的遍历方法,并通过示例进行解释。 我们有传统的`for`循环,这是最基础且通用的遍历方式。对于数组,可以使用如下代码: ```javascript var arrTmp = ["value1", "value2", "value3"]; for (var i = 0; i < arrTmp.length; i++) { console.log(i + ": " + arrTmp[i]); } ``` 这段代码会依次打印数组中的每个元素及其对应的索引。 另一方面,`for-in`循环通常用于遍历对象的属性,但也可以应用于数组。然而,它会遍历所有可枚举属性,包括数组的索引(视为对象属性),如下所示: ```javascript var objTmp = {aa: "value1", bb: "value2", cc: function() {console.log("value3")}}; for (var i in objTmp) { console.log(i + ": " + objTmp[i]); } ``` `forEach`方法是ES5引入的新特性,它提供了一种更简洁的遍历数组的方式,但不支持`break`、`continue`或`return`。代码如下: ```javascript arrTmp.forEach(function(value, index, array) { console.log(value + "," + index + "," + array[index]); }); ``` 在ES6中,引入了`for-of`循环,它可以遍历任何可迭代对象,如数组、Map、Set等。`for-of`不提供索引,但能遍历到每个元素。例如: ```javascript for (let i of arrTmp) { console.log(i); } ``` 此外,如果你需要遍历对象的属性名,可以使用`Object.keys()`方法,它返回一个包含对象所有可枚举属性名的数组: ```javascript let xyz = {z: "zzz", x: "xxx", y: "yyy"}; console.log(Object.keys(xyz)); // (3) ["z", "x", "y"] ``` 除了`for-of`,ES6还引入了`Map`和`Set`,它们提供了新的遍历方式。例如,遍历`Map`对象,我们可以这样做: ```javascript let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let [key, value] of iterable) { console.log(value); } ``` 总结一下,JavaScript提供了多种遍历数组和对象的方法,包括`for`循环、`for-in`循环、`forEach`、`for-of`以及`Object.keys()`。选择哪种方法取决于具体需求,比如是否需要索引、是否要遍历对象的属性名、是否需要控制循环流程(如使用`break`或`continue`)等。在实际开发中,应根据具体情况选择最合适的方法。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/release/download_crawler_static/13128338/bg1.jpg)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 2
- 资源: 921
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
- 【全年行事历】行政部全年活动计划表- A公司.xls
- 【全年行事历】活动复盘表.xlsx
- 【全年行事历】活动推广进度表.xlsx
- 【全年行事历】旅游团建行程安排表-XX山.xlsx
- 【全年行事历】旅行团建活动方案.pptx
- 【全年行事历】某公司团建活动方案-【户外烧烤】.doc.baiduyun.uploading.cfg
- 【全年行事历】企业文化年度活动计划表.xlsx
- 【全年行事历】年度员工关怀计划表.xlsx
- 【全年行事历】年度行政活动计划表.xlsx
- 【全年行事历】企业团队建设活动策划.pptx
- 【全年行事历】全年活动计划.xls
- 【全年行事历】团队建设企业文化行事历——工作计划.xlsx
- 【全年行事历】企业员工夏季团建活动策划一天.pptx
- 【全年行事历】团建费用分析.xlsx
- 【全年行事历】团建行程安排及出行清单.xlsx
- 【全年行事历】团建活动采购预算清单.xlsx
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)