JavaScript中的for...of和for await...of循环

JavaScript for...of与for await...of循环详解
最新推荐文章于 2024-07-29 17:25:46 发布
最新推荐文章于 2024-07-29 17:25:46 发布
阅读量347 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133158757
JavaScript 专栏收录该内容
306 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了JavaScript中的for...of和for await...of循环，用于遍历可迭代对象。for...of循环适用于数组、字符串、Map和Set，而for await...of循环则用于异步迭代，尤其在处理异步操作如读取文件或请求数据时。通过示例代码展示了它们的使用方法。

JavaScript是一种广泛使用的脚本语言，用于开发Web应用程序和其他类型的应用程序。它提供了多种循环结构，其中包括for…of和for await…of循环。这两种循环结构用于遍历可迭代对象，如数组、字符串、Map和Set等。在本文中，我们将详细介绍for…of和for await…of循环，并提供一些示例代码来说明它们的用法。

for…of循环用于遍历可迭代对象中的元素。它提供了一种简洁的语法来迭代数组、字符串等结构。下面是for…of循环的语法：

for (variable of iterable) {
   
   
  // 循环体
}

在上面的语法中，variable是一个变量，用于存储每次迭代中的元素值。iterable是一个可迭代对象，例如数组或字符串。在每次循环迭代中，variable将被赋值为可迭代对象中的下一个元素，直到所有元素都被遍历完毕。

下面是一个使用for…of循环遍历数组的示例：


                

                
                
        

    

  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
For...in和for...of之间的区别及async/await在JavaScript中的用法

				
			

			

				

					debug_bug142的博客
				

				

					10-01
					
					489
					
				

			

		

		

			
				
需要注意的是，for…in循环不仅遍历对象自身的属性，还会遍历对象原型链上的属性。在上面的示例中，delay函数返回一个Promise对象，它会在指定的时间后解析。其中，variable是一个变量，用于存储对象的属性名。of循环只能用于遍历可迭代对象，如果尝试遍历一个非可迭代对象，将会抛出TypeError。需要注意的是，使用await关键字的函数必须在其声明前加上async关键字，以标识它为一个异步函数。of循环只会遍历可迭代对象自身的元素，而不会遍历原型链上的属性。下面是一个简单的示例，演示了for…

			
		

	



                

            
              



	

		

			

				
					
for await of异步迭代器（ES9）

				
			

			

				

					weixin_44011306的博客
				

				

					06-27
					
					4651
					
				

			

		

		

			
				
for await of异步迭代器for await of
for await of
异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。
我们知道 for…of 是同步运行的，有时候一些任务集合是异步的，那这种遍历怎么办呢？
function Gen(time) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
          

			
		

	



              


  
              

                


	

		

			

				
					
“JavaScript 循环中的 ‘await‘

				
			

			

				

					每天都要努力学习哦~~
				

				

					01-25
					
					3255
					
				

			

		

		

			
				
在JavaScript的`forEach`方法中使用`await`是无效的，因为`forEach`方法不支持异步操作的等待。`forEach`是一个数组的遍历方法，它会对数组中的每个元素依次执行提供的回调函数。而在JavaScript中，`await`关键字只能在异步函数(`async`函数)中使用，用于等待一个Promise对象的解析结果。在`forEach`的回调函数中使用`await`关键字，实际上会导致它被忽略，无法正确地等待异步操作的完成。

			
		

	





	

		

			

				
					
for await...of 和for....of的区别是什么

				
			

			

				

					Meta.Qing的博客
				

				

					10-26
					
					840
					
				

			

		

		

			
				
是 JavaScript 中的两种不同循环结构，它们的主要区别在于它们用于遍历的目标不同。适用于异步数据的迭代，因此选择哪种循环取决于你要处理的数据类型和操作类型。适用于同步数据的迭代，而。

			
		

	



		

			
		



	

		

			

				
					
异步迭代器 for await of

				
			

			

				

					qq_36437172的博客
				

				

					02-16
					
					573
					
				

			

		

		

			
				
for of方法能够遍历具有Symbol.iterator接口的同步迭代器数据，但是不能遍历异步迭代器。ES9新增的for await of可以用来遍历具有Symbol.asyncIterator方法的数据结构，也就是异步迭代器，且会等待前一个成员的状态改变后才会遍历到下一个成员，相当于async函数内部的await。现在我们有三个异步任务，想要实现依次输出结果，该如何实现呢？


// for ...

			
		

	





	

		

			

				
					
for await of

				
			

			

				

					qq_25919495的博客
				

				

					08-04
					
					270
					
				

			

		

		

			
				
for await of

			
		

	





	

		

			

				
					
[js] for forEach for of 循环里await关键字的用法

				
			

			

				

					qq_14993591的博客
				

				

					11-25
					
					1800
					
				

			

		

		

			
				
2、forEach：循环中使用await的写法（3、for of：循环中使用await的写法（1、for：循环中使用await的写法（

			
		

	





	

		

			

				
					
【JS基础】从JavaScript中的for...of说起(下) - async和await

				
			

			

				

					weixin_34178244的博客
				

				

					04-16
					
					584
					
				

			

		

		

			
				
写在前面

本文首发于公众号：【符合预期的CoyPan】

在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。
【JS基础】从JavaScript中的for...of说起(上) - iterator 和 generator
在异步操作中使用iterator和generator是一件比较费劲的事情，而ES2017给我们...

			
		

	





	

		

			

				
					
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)

				
			

			

				

					11-26
				

			

		

		

			
				
然而，ES6新增了`Map`和`Set`等数据结构，并引入了`for-of`循环，这是专门为消费迭代器设计的。这意味着，有了迭代器，我们可以通过`for-of`循环统一地处理所有可迭代的数据结构。  要使一个数据结构成为可遍历的...

			
		

	





	

		

			

				
					
nodejs for await...of

					
最新发布

				
			

			

				

					04-11
				

			

		

		

			
				
嗯，用户想了解Node.js中for await...of的用法和示例。首先，我需要回忆一下这个语句的作用。记得for...of是用来遍历可迭代对象的，比如数组。而加上await的话，应该是处理异步迭代的情况。比如遍历一个异步生成的...

			
		

	





	

		

			

				
					
JS 循环中使用await

				
			

			

				

					【爱打盹的喵】的专栏
				

				

					06-25
					
					2039
					
				

			

		

		

			
				
程序中，有时候需要在循环中按照顺序进行数据操作，但是又有异步的动作，所以就希望用await。for、for of、for await of是生效的，forEach的await是不生效的；for、for of是await这一行代码在等待，for await of是整个for在等待；，我写这篇只是为了记录结论。2. 验证过程请参考原文。，我这里只展示验证结果。前言：整篇文章参考原文。

			
		

	





	

		

			

				
					
 ES2018 新特征之：异步迭代器 for-await-of

				
			

			

				

					weixin_33849215的博客
				

				

					02-26
					
					239
					
				

			

		

		

			
				
ES2018 新特性


异步迭代器（本文）
正则表达式反向(lookbehind)断言
正则表达式 Unicode 转义
非转义序列的模板字符串
正则表达式 s/dotAll 模式
正则表达式命名捕获组
对象展开运算符
Promise.prototype.finally

1. 概述
在 ECMAScript 2015(ES6) 中 J...

			
		

	





	

		

			

				
					
JS 【详解】 for in 与 for of 的区别（含 for await ... of 的使用、与 Promise.all 的区别）

				
			

			

				

					朝阳39的博客
				

				

					07-29
					
					671
					
				

			

		

		

			
				
含 for await ... of 的使用、与 Promise.all 的区别

			
		

	





	

		

			

				
					
异步迭代器 for-await-of

				
			

			

				

					好好学习天天向上 
				

				

					10-25
					
					1244
					
				

			

		

		

			
				
集合概念有字符串、数组、对象、Map、Set，需要有一个统一的来处理所有不同的数据结构。迭代器iterator是一种接口，为不同的数据结构提供统一的访问机制Iteratorfor..offor-ofArray.from（…）Set。

			
		

	





	

		

			

				
					
for await…of

				
			

			

				

					weixin_43758377的博客
				

				

					04-25
					
					329
					
				

			

		

		

			
				
for…of循环用于遍历同步的 Iterator 接口。新引入的for await…of循环，则是用于遍历异步的 Iterator 接口。
async function f() {
  for await (const x of createAsyncIterable(['a', 'b'])) {
    console.log(x);
  }
}
// a
// b

https://www.bookstack.cn/read/es6-3rd/spilt.3.docs-async-iterator.md


			
		

	





	

		

			

				
					
for await...of

				
			

			

				

					m0_47999208的博客
				

				

					06-22
					
					524
					
				

			

		

		

			
				
确保了每次循环都会等待当前的异步操作完成后再继续下一次迭代。这意味着即使每个项目处理是异步的（例如涉及网络请求或文件I/O），你也可以按顺序处理它们，而无需手动管理Promise链或回调函数。是JavaScript中的一种循环结构，特别设计用于异步迭代。它允许你以一种简洁、同步风格的方式遍历异步可迭代对象（如那些通过异步生成器函数产生的）。这对于处理异步操作，如。循环提供了一种优雅的方式来遍历异步数据源，使得异步编程更加直观和易于管理。循环，所在的函数必须被声明为。只能在异步函数内部使用。

			
		

	





	

		

			

				
					
forEach、for、for of 循环中使用 await

				
			

			

				

					qq_38778882的博客
				

				

					05-09
					
					903
					
				

			

		

		

			
				
forEach、for、for of 循环中使用 await

			
		

	





	

		

			

				
					
for of + await顺序执行（用于循环请求接口）

				
			

			

				

					liona_koukou的博客
				

				

					04-01
					
					4947
					
				

			

		

		

			
				
鉴于现阶段需求，大量图片（一次限制500张）依次单张上传，不想频繁进行请求，可采用以下两种方法，第一种请求间隔递增，第二种间隔相同时间请求。


let a = [1,2,3,4,5];
function delay(index){
    return new Promise((resolve)=>{
        setTimeout(resolve,index*1000);
    ...

			
		

	





	

		

			

				
					
js ES6 Iterator 遍历器与 for、for...of、for await...of、for...in 和 forEach 循环语句

				
			

			

				

					青蛙king的博客
				

				

					07-07
					
					3131
					
				

			

		

		

			
				
一、Iterator















Iterator（遍历器）的概念
默认 Iterator 接口
调用 Iterator 接口的场合
字符串的 Iterator 接口
Iterator 接口与 Generator 函数
遍历器对象的 return()，throw()


二、for...of 循环
...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值