js遍历 for-of

最新推荐文章于 2023-07-29 17:59:07 发布
最新推荐文章于 2023-07-29 17:59:07 发布
阅读量198 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ydymz/p/8399902.html

for-of遍历

  • entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。
  • keys() 返回一个遍历器对象，用来遍历所有的键名。
  • values() 返回一个遍历器对象，用来遍历所有的键值。




// demo
var arr = ['a', 'b', 'c'];
for (var pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']







记住记住.


 


转载于:https://www.cnblogs.com/ydymz/p/8399902.html

                

        




    

    
  



    



                



	

		

			

				
					
前端JavaScript篇之如何使用for...of遍历对象

				
			

			

				

					星辰迷上大海的博客
				

				

					02-07
					
					2304
					
				

			

		

		

			
				
在JavaScript中，for...of循环是设计来遍历具有迭代器的数据结构的，比如数组、Map、Set等。对象(Object)本身并不是可迭代的，所以不能直接用for...of来遍历。但是，我们可以通过一些方法将对象的某些属性转换成可迭代的格式，然后使用for...of进行遍历。

			
		

	



                

            
              



	

		

			

				
					
深入解读JavaScript中的Iterator和for-of循环

				
			

			

				

					10-23
				

			

		

		

			
				
JavaScript中的Iterator和for-of循环是ES6（ECMAScript 2015）规范中引入的重要特性。它们为遍历数据结构提供了一种更加简洁、直观且功能强大的方法。在介绍这两个概念之前，我们先来回顾一下传统的遍历方法。  在...

			
		

	



              


  
              

                


	

		

			

				
					
JS中让对象支持for...of遍历（顺便说说迭代器）

				
			

			

				

					咘噜biu的博客
				

				

					11-29
					
					3559
					
				

			

		

		

			
				
of，给每个对象都去添加迭代器是比较繁琐的（即使你像上面那样实现了添加的复用），有一个办法就是直接给对象的原型添加迭代器，要指出的是这样做可能会有一些副作用，Object.prototype位于各种类型的原型链顶端，影响面会非常广，ES6本可以这样做，但是它却没这样做（肯定是有原因的），所以建议按需添加会比较好。想一想，如果有很多对象（但不是所有对象都需要）都想要使用for…of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的next() 方法来遍历所有返回值。，这是两个不同的概念。

			
		

	





	

		

			

				
					
JS中是如何使用for..of来遍历对象

				
			

			

				

					weixin_46051260的博客
				

				

					07-21
					
					1807
					
				

			

		

		

			
				
JS中是如何使用for..of来遍历对象的

			
		

	



		

			
		



	

		

			

				
					
[js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

				
			

			

				

					weixin_34292402的博客
				

				

					09-24
					
					216
					
				

			

		

		

			
				
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 
在es6中引入了一个新的循环结构for ....of， 主要是用来循环可迭代的对象，那么什么是可迭代的对象呢？
可迭代的对象一般都有Symbol.iterator属性，你可以在控制台中用console.dir打印数组,Map,Set，在他们的原型对象(prototype)上面就能找到。这个属性与迭代器密切相关，通过该函数...

			
		

	





	

		

			

				
					
JS中让对象支持for...of遍历

				
			

			

				

					_
				

				

					03-15
					
					5038
					
				

			

		

		

			
				
1.for…of的工作原理


for…of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的next() 方法来遍历所有返回值。


数组可以直接使用for…of遍历是因为数组内置了迭代器
2.让对象支持for…of

让对象支持for…of的办法就是手动给对象添加迭代器

var myObject = { a: 1, b: 2, c: 3 };

//写法一：简单写法
myObject[Symbol.iterator] = function(){
    const _this = t

			
		

	





	

		

			

				
					
06-for-in和for-of的区别.md

				
			

			

				

					03-31
				

			

		

		

			
				
与`for-in`循环不同，`for-of`循环不会遍历对象的属性，而是直接提供对对象的值的访问。它还能直接作用于字符串，输出每一个字符。  ```js const str = 'abc'; for (let value of str) {  console.log(value); // ...

			
		

	





	

		

			

				
					
全面解析JavaScript里的循环方法之forEach，for-in，for-of

				
			

			

				

					10-22
				

			

		

		

			
				
在JavaScript中，有三种主要的循环方法：`forEach`、`for-in`和`for-of`，每种都有其特定的用途和特点。  `forEach`方法是ES5引入的一个数组方法，简化了对数组元素的遍历。例如：  ```javascript myArray.forEach...

			
		

	





	

		

			

				
					
js遍历map javaScript遍历map的简单实现

				
			

			

				

					11-26
				

			

		

		

			
				
在JavaScript中，遍历Map对象通常有两种主要的方法：使用`for...of`循环和使用`Map.prototype.forEach()`方法。  首先，让我们来看看在给定的描述中展示的简单实现：  ```javascript var map = {  "name": "华仔",  ...

			
		

	





	

		

			

				
					
遍历react-router-dom6路由路径的query参数

					
最新发布

				
			

			

				

					03-14
				

			

		

		

			
				
for (const [key, value] of searchParams.entries()) {  console.log(key, value); } ```  不过，在React组件中，可能需要将查询参数转换为数组或者对象，以便在渲染时使用。比如，使用`Array.from`将迭代器转换...

			
		

	





	

		

			

				
					
js中for of能否遍历对象

				
			

			

				

					lyy18719172450的博客
				

				

					03-30
					
					3193
					
				

			

		

		

			
				
不能
for of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的next() 方法来遍历所有返回值
for of能遍历的有set map array string因为这些类型有迭代器对象
但是object没有迭代器对象所以无法遍历对象
但是可以用for in来遍历
var a= {
	b:1
}
for(let i in a){
	console.log(a[i]);
}

详情参考https://blog.csdn.net/xhom_w/article/details/1033134

			
		

	





	

		

			

				
					
js让for of也可以遍历对象

				
			

			

				

					小蜜蜂的博客
				

				

					09-29
					
					872
					
				

			

		

		

			
				
迭代器知识

			
		

	





	

		

			

				
					
JavaScript 迭代器实现for of遍历对象

				
			

			

				

					jsphpyyds的博客
				

				

					07-15
					
					304
					
				

			

		

		

			
				
很多时候，我个人感觉开发过程中一味的使用for in 遍历对象不太方便，使用for of就比较轻松，但是好巧不巧对象没有部署迭代器，这就很烦了。。好在ES6是可以让我们自定义迭代器的，于是我们可以在对象上部署一个迭代器，这个迭代器的功能完全由开发者决定，不一定非要暴力枚举对象上的每个键值对，开发过程中按照实际需求来。

在这里简单实现一个for of枚举对象的值


'use strict'
		//迭代器
		const obj={
			name:"chn",
			age:18,
			arr:[1,

			
		

	





	

		

			

				
					
js中如何使用for..of来遍历对象？

				
			

			

				

					fangqi20170515的博客
				

				

					08-27
					
					4560
					
				

			

		

		

			
				
for …of是ES6新增的遍历方式，用于遍历数组和对象的。for…of是允许遍历一个含有Iterator接口的数据结构（对象、数组等）并且返回各项值。普通对象是无法遍历的。

			
		

	





	

		

			

				
					
js之for...of...循环遍历可迭代对象

				
			

			

				

					平平无奇小码农的博客
				

				

					12-08
					
					1563
					
				

			

		

		

			
				
不会吧不会吧，我不会是最后一个知道for of不能遍历普通对象的叭

接下来咱们就好好扒一扒这个 for of循环：

for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。（来自MDN解释）。

我们最常见的就是用for of 去遍历数组：
let arr = ['tom', 'jerry']

for(item of arr) {
	console.log(

			
		

	





	

		

			

				
					
JavaScript：js数组/对象遍历方法

				
			

			

				

					snow的博客
				

				

					06-03
					
					7160
					
				

			

		

		

			
				
undefinedfor使用最基本的for循环可以遍历数组。for...of语句用来遍历可迭代对象（包括数组、Set、Map、字符串等），它可以替代传统的for循环和forEach方法。for...of循环每次迭代都将返回一个值，而不是索引。循环还可以遍历字符串，并且能够正确处理 Unicode 字符。需要注意的是:for...of 循环不能遍历普通对象，因为它们不是可迭代对象。对于普通对象，可以使用for...in循环来遍历对象的属性。

			
		

	





	

		

			

				
					
js中的遍历方法比较：map、for...in、for...of、reduce和forEach的特点与适用场景

				
			

			

				

					杜永康的博客
				

				

					07-29
					
					1083
					
				

			

		

		

			
				
map 方法是 JavaScript 数组提供的高阶函数之一，它接受一个函数作为参数，并对数组中的每个元素执行该函数。通过这种方式，开发者可以轻松地对数组元素进行转换或生成新的数组，而不需要编写显式的循环。for…in 循环是一种遍历对象属性的迭代循环，它通常用于遍历普通对象或数组等可迭代的结构。与传统的 for 循环或 forEach 方法不同，for…in 循环主要用于迭代对象的键（属性名），而非数组的索引或元素值。它提供了一种简洁且易于使用的方式来访问对象的属性。

			
		

	





	

		

			

				
					
JS实现对象的for-of循环

				
			

			

				

					qq_44675204的博客
				

				

					08-24
					
					1870
					
				

			

		

		

			
				
众所周知，对象可以通过for-in进行遍历，不可以使用for-of进行遍历。
let a = {
    b: 1,
    c: 2
}
for(let key in a) {
    console.log(key); // b c
}
for(let key of a) {
    console.log(key); // error
}

但是，数组却可以使用for-of进行遍历，为什么呢？
原来是数组中有个 Symbol.iterator 属性，使数组可以进行迭代，那么如果我们给对象也加上个这样的

			
		

	





	

		

			

				
					
js中的循环遍历数组中的元素，ES6（for-of）、ES5（forEach、for-in）、通用（for（i=0；i<length;i++））

					
热门推荐

				
			

			

				

					Harry_一棵树的博客
				

				

					04-27
					
					1万+
					
				

			

		

		

			
				
我们如何遍历数组中的元素？for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}ES5myArray.forEach(function (value) {
console.log(value);
});缺点：你不能使用break语句中断循环，也不能使用return语句返回到外层函数

			
		

	





	

		

			

				
					
深入解析JavaScript for循环及其ES6新增for-of

				
			

			

				

					
				

			

		

		

			
				
在ES6中，引入了for-of循环，它特别针对迭代器（Iterator）和可迭代对象（Iterable）设计，使得遍历数据结构（如数组、字符串、Set、Map等）更加直观。例如，对于数组，你可以这样使用`for(const element of arr) { ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值