经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
javascript中for...of和for..in循环的区别
来源:jb51  时间:2022/8/16 17:28:12  对本文有异议

for…in可以用来干什么

(1)for…in最好用来遍历对象,但也可以遍历数组(有缺陷)
(2)for…in遍历的是key-value中的key值

我们先看怎么使用for…in遍历对象

  1. const obj = {
  2. ?? ?a:1,
  3. ?? ?b:2,
  4. ?? ?c:3
  5. }
  6.  
  7. for( var o in obj){
  8. ?? ?console.log(o); // 遍历出来的是对象中的属性,a,b,c
  9. ?? ?console.log(obj[o]); // 遍历出来的是对象中属性各自对应的值1,2,3
  10. }

需要注意的是,使用for…in遍历对象时,不仅会把对象上的属性遍历出来,还会把对象原型链上的可枚举的属性遍历出来

再看看for…in遍历数组能不能成功

  1. const arr = [1,2,3,4,5]
  2. for(var a in arr){
  3. console.log(a); // 输出的是数组索引
  4. console.log(arr[a]); // 输出的是数组索引对应的值
  5. }

结果是成功的,但又为什么说最好不要用for…in遍历数组呢?

(1)for…in遍历出的数组索引为字符串型数字,不能直接进行几何运算
(2)遍历的顺序可能不是按照实际数组的内部顺序
(3)使用for…in会遍历所有的可枚举属性,包括原型

for…of能用来做什么

(1)for…of可以用来遍历数/数组/字符串/map/set等拥有迭代器对象的集合
(2)for…of遍历出来的是key-value中的value值

  1. // 遍历数组
  2. var arr = [1,2,3,4,3,5,7];
  3. for (let i of arr){
  4. ?? ?console.log(i);
  5. }
  6.  
  7. // 遍历字符串
  8. var str = 'hello'
  9. for (let s of str){
  10. ?? ?console.log(s);?
  11. }
  12.  
  13. // 遍历set集合
  14. const set = new Set([1,2,3,4])
  15. for (let s of set){
  16. ?? ?console.log(s);
  17. }

补充:
(1)for…of不能用来遍历对象,因为普通对象中没有迭代器对象
(2)与forEach()不同的是,for…of可以使用break,continue,return等语句

总结下来就是:

(1)在遍历对象时用for…in,在遍历数组时用for…of
(2)for…in遍历出的是key,for…of遍历出的结果是value。
也就是说遍历数组时,for…in遍历的是数组的索引,for…of遍历的是数组的元素值。

到此这篇关于javascript中for...of和for..in循环的区别的文章就介绍到这了,更多相关javascript for...of和for..in内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号