一、一般的遍历数组的方法:

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

二、用for in的方遍历数组

    for(let index in array) {  console.log(index,array[index]);  };  

三、forEach

array.forEach(v=>{  console.log(v);
});
array.forEach(function(v){  console.log(v);
});
 

四、用for in不仅可以对数组,也可以对enumerable对象操作

var A = {a:1,b:2,c:3,d:"hello world"};
for(let k in A) {  console.log(k,A[k]);
} 

五、在ES6中,增加了一个for of循环,使用起来很简单

    for(let v of array) {  console.log(v);  };  

let s = "helloabc";

for(let c of s) {

console.log(c);

}

 

总结来说:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面

    var set = new Set();  set.add("a").add("b").add("d").add("c");  var map = new Map();  map.set("a",1).set("b",2).set(999,3);  for (let v of set) {  console.log(v);  }  console.log("--------------------");  for(let [k,v] of map) {  console.log(k,v);  }  

javascript遍历对象详细总结

1.原生javascript遍历

(1)for循环遍历

let array1 = ['a','b','c'];
for (let i = 0;i < array1.length;i++){console.log(array1[i]);  // a  b  c
}

(2)JavaScript 提供了 foreach()  map() 两个可遍历 Array对象 的方    

forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;

Array.forEach(function(value , index , array){ //value为遍历的当前元素,index为当前索引,array为正在操作的数组//do something
},thisArg)      //thisArg为执行回调时的this值

不同点:

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组;

例子如下:

var array1 = [1,2,3,4,5];var x = array1.forEach(function(value,index){console.log(value);   //可遍历到所有数组元素return value + 10
});
console.log(x);   //undefined    无论怎样,总返回undefinedvar y = array1.map(function(value,index){console.log(value);   //可遍历到所有数组元素return value + 10
});
console.log(y);   //[11, 12, 13, 14, 15]   返回一个新的数组

对于类似数组的结构,可先转换为数组,再进行遍历

let divList = document.querySelectorAll('div');   //divList不是数组,而是nodeList//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){element.classList.add('test')
})Array.prototype.slice.call(divList).forEach(function(element,index){element.classList.remove('test')
})[...divList].forEach(function(element,index){   //<strong>ES6写法</strong>//do something
})

(3)for ··· in ···     /      for ··· of ···

for...in 语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。每次迭代时,分配的是属性名  

补充 : 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。

let array2 = ['a','b','c']
let obj1 = {name : 'lei',age : '16'
}for(variable  in array2){   //variable  为 indexconsole.log(variable )   //0 1 2
}for(variable  in obj1){   //variable 为属性名console.log(variable)   //name age
}

ES6新增了 遍历器(Iterator)机制,为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作  ( Iterator详解 :  http://es6.ruanyifeng.com/#docs/iterator ),每次迭代分配的是 属性值

原生具备 Iterator 接口的数据结构如下:

Array   Map Set String TypedArray 函数的arguments对象 NodeList对象

let array2 = ['a','b','c']
let obj1 = {name : 'lei',age : '16'
}for(variable  of array2){   //<strong>variable  为 value</strong>console.log(variable )   //'a','b','c'
}for(variable  of obj1){  //<strong>普通对象不能这样用</strong>console.log(variable)   // 报错 : main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}<br><br>let divList = document.querySelectorAll('div');<br><br>for(element of divlist){  //可遍历所有的div节点<br>  //do something <br>}

如何让普通对象可以用for of 进行遍历呢?  http://es6.ruanyifeng.com/#docs/iterator  一书中有详细说明了!

  除了迭代时分配的一个是属性名、一个是属性值外,for in 和 for of 还有其他不同    (MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

    for...in循环会遍历一个object所有的可枚举属性。

      for...of会遍历具有iterator接口的数据结构

      for...in 遍历(当前对象及其原型上的)每一个属性名称,而 for...of遍历(当前对象上的)每一个属性值

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};let iterable = [3, 5, 7];
iterable.foo = "hello";for (let i in iterable) {console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}for (let i of iterable) {console.log(i); // logs 3, 5, 7
}

转载于:https://www.cnblogs.com/airen123/p/9543702.html

forEach,for in,for of循环的用法相关推荐

  1. Js中forEach,for in,for of循环的用法

    取出数组里边对象的key和value值: 取出数组里边对象的key和value值_chu_geng的博客-CSDN博客_获取数组里面对象的value值 转自:js中forEach,for in,for ...

  2. 【JavaScript面试】forEach,for in,for of循环的用法

    一般的遍历数组的方法 var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,arra ...

  3. python的for语句用法_python中list循环语句用法实例

    本文实例讲述了python中list循环语句用法.分享给大家供大家参考.具体用法分析如下: Python 的强大特性之一就是其对 list 的解析,它提供一种紧凑的方法,可以通过对 list 中的每个 ...

  4. VTK:循环收缩用法实战

    VTK:循环收缩用法实战 程序输出 程序完整源代码 程序输出 程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h> #inc ...

  5. php语言while循环语句,PHP循环语句用法之while循环

    PHP循环语句用法之while循环 计算机对于重复性的工作是很有一套解决办法的,以下百分网小编整理的PHP循环语句用法之while循环的介绍吧,希望对大家有所帮助,更多信息请关注应届毕业生网! 计算机 ...

  6. python循环语句画图_Python基础之循环语句用法示例【for、while循环】

    本文实例讲述了Python基础之循环语句用法.分享给大家供大家参考,具体如下: while 循环 Python中while语句的一般形式: while 判断条件: statements 同样需要注意冒 ...

  7. Python循环高级用法

    Python循环高级用法 1.带有if语句 我们可以在 for 语句后面跟上一个 if 判断语句,用于过滤掉那些不满足条件的结果项. 例如,我想去除列表中所有的偶数项,保留奇数项,可以这么写: > ...

  8. for循环语句例题及解析python_Python中for循环控制语句用法实例

    Python中for循环控制语句用法实例 这篇文章主要介绍了Python中for循环控制语句用法,较为详细的分析了for循环语句的原理与相关使用技巧,本文实例讲述了Python中for循环控制语句用法 ...

  9. 在javascript 用foreach遍历列表数据进行循环

    最近在工作中开发一个公司流程架构,因为所有数据是后台配置实现,在取值和验证的时候无法用常规的for循环在js里,最后尝试直接用c:foreach在js里进行使用,其用法与常规的for循环一样: 标题 ...

  10. python中enumerate在for循环中用法_python中enumerate的用法实例解析

    在python中enumerate的用法多用于在for循环中得到计数,本文即以实例形式向大家展现python中enumerate的用法.具体如下: enumerate参数为可遍历的变量,如 字符串,列 ...

最新文章

  1. 手把手教你用Prophet快速进行时间序列预测(附Prophet和R代码)
  2. redis集群(主从配置)
  3. spring aop实现过程之三Spring AOP中Aspect编织的实现
  4. Access注入偏移爆字段
  5. linux安装软件测试报告,软件测试实习报告
  6. 固态硬盘可靠性_您可以通过使用较少的总容量来提高硬盘的可靠性吗?
  7. insight切换窗口 source_source insight的使用方法逆天整理(1)
  8. CVPR 2021 | 基于随机标签的神经架构搜索
  9. 《电子元器件的可靠性》——3.4节失效分布类型的检验
  10. Ubuntu下lamp(PHP+Mysql+Apache)搭建+完全卸载卸载方法
  11. idea2020在工具栏显示前进和后退箭头
  12. Spring源码全解
  13. FPGA厂家谁家强?
  14. fms 连 mysql_FMS+Thinkphp+Mysql 直播源代码,开源可消耗
  15. 做嵌入式编程,为什么用的是C语言而不是C++呢?
  16. 关于笔记本电脑蓝牙设置开关消失的处理方法
  17. Git本地文件上传到远程仓库
  18. 利用有限元数值模拟技术辅助静电场学习
  19. 解决 No resource found that matches the given name (at 'layout_above' with value '@id/button3').
  20. 蓝桥杯第一次模拟赛JAVA题解

热门文章

  1. Win7从VHD中启动 如何扩充虚拟磁盘
  2. 虚拟 Linux【转】
  3. TreeView中丢失的图标
  4. 【SIGIR2020】信息检索对话中混合主动性和协同性的分析
  5. 【推荐系统】那些年, 引用量超1000的经典推荐系统论文
  6. 头条面试题,4种解法,60+图清晰讲解,面试官让我优化,小夕一通优化最终击败100%用户
  7. PyTorch学习笔记——语言模型
  8. RabbitMQ学习——常见概念详解
  9. 时隔二十年,《程序员修炼之道》出第二版了!
  10. 敏捷无它,唯持续改进