首页 > 软件开发 > JavaScript >

如何使用ES6中for of和for in循环遍历对象区别

来源:互联网 2023-03-16 23:58:15 344

在ES6中,for...of遍历对象,可以获取对应的元素,而for...in遍历对象,是获取对应元素的序号;同样的,for...of是遍历获取对象中的value,而for...in是获取对象的key。下面利用几个实例说明,操作如下:0c8办公区 - 实用经验教程分享!

如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

工具/原料

  • HBuilder
  • ES6
  • JavaScript
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,定义一个lis数组并进行赋值,然后使用for...of遍历数组,打印元素,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 2

    第二步,直接运行这个JavaScript文件,可以在控制台看到打印的结果,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 2该信息非法爬取自百度经验
  • 3

    第三步,将第一步中的for...of换成for...in语句,并打印对应的结果,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 4

    第四步,再次运行这个文件,可以看到打印的结果为元素对应的序号,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 5

    第五步,利用Set集合声明一个变量fruit,并使用水果英文单词进行赋值,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 6

    第六步,使用for...of变量第五步定义的Set变量,打印结果,可以发现是打印出来的是value值,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 7

    第七步,将for...of换成for...in,再次保存运行文件,查看打印结果,显示的是key值,如下图所示:0c8办公区 - 实用经验教程分享!

    如何使用ES6中for of和for in循环遍历对象区别0c8办公区 - 实用经验教程分享!

  • 注意事项

    • 注意for...in和for...of的区别
    • 注意使用不同类型的循环遍历对象

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!0c8办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码