es6 for of循环和for in循环的区别

最新推荐文章于 2026-04-10 22:04:26 发布

原创最新推荐文章于 2026-04-10 22:04:26 发布 · 740 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#es6

收录于

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

如上例所示，for...in 循环只能获取数组的键名，不能直接获取键值，es6提供的for...of 可以直接获取键值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xingyemeng1202

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ES6 for循环的三种方法

weixin_47087818的博客

10-23

3664

// 1.普通for循环 let totalPrice1 = 0; for (let i = 0; i < books.length; i++) { totalPrice1 += books[i].count * books[i].price } console.log(totalPrice1); // 2. for(let i in this.books),i是下标 let totalPrice2 = 0; for (let i in books) { let book = books[i

参与评论您还未登录，请先登录后发表或查看评论

ES6的三种for循环写法

yuguang的博客

12-02

6036

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script.

ES6——Iterator和for...of循环详解

最新发布

吴声子夜歌的博客

04-10

433

ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”(iterable)。这样就有了4种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map,Map的成员是对象。上面的代码首先在构造函数的原型链上部署Symbol.iterator方法，调用该方法会返回遍历器对象iterator，调用该对象的next方法，在返回一个值的同时自动将内部指针移到下一个实例。

es6的Iterator 和 for...of 循环（超详细！！）

ikkkp的博客

08-27

918

es6的Iterator 和 for...of 循环（超详细！！）

ES6中的for...in/of的使用

Matcha_ice_cream的博客

08-09

947

介绍ES6中的for...in/of

ES6遍历方法，forEach、for...in，for..of

m0_45884629的博客

11-14

6580

Object.getOwnPropertyNames,Reflect.ownKeys(obj),Object.keys()

for循环遍历 ES5中for in 和 ES6中的for of的区别？

lin2785的博客

04-13

224

for in 和 for of 都可以循环数组，for in 输出的是数组的下标索引，而for of 输出的是数组的每一项的值。区别二：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。总结：for in适合遍历对象，for of适合遍历数组。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。

经常容易搞混的for循环，for in 循环，for of循环（es6新语法）map()遍历和foreach遍历区别和写法

qq_39562867的博客

11-07

1900

前缀：因为女票基础知识薄弱，对各种循环搞不清楚，特写此博客用来学习参考。。。话不多说直接上代码，拷贝代码控制台查看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>数组的遍历方式</title> <link hre

for···in··· 和 for···of··· 的区别

Robergean的博客

08-11

908

好久不见，我又来整理心得了今天来说说for···in··· 和 for···of··· 的区别先看看for···in··· // 数组 let Fin = [1, 2, 3] for(let i in Fin) { console.log(i) } //对象 let Fof = { name: 'rider', do: 'henshin' } for(let i in Fof){ console.log(i) } 输出结果为：这里的输出的为键(key)

ES6新增for of方法和for in方法有哪些区别和不同点，两者的应用场景有什么不同，循环机制有什么不同!

海贼王某人的博客

06-05

501

要了解两者的不同还是用实例来说明吧，从最常用的两个遍历场景数组和对象来说吧：遍历数组： var arr = ['a', 'b', 'c', 'd']; for (let a in arr) { console.log(a); // 0 1 2 3 } for (let a of arr) { console.log(a); // a b c d } 从上面的结果可以看出，for in 遍历的是数组的key值，就是下标，而for of却遍历的是value值，就是数据本身，遍历数组的话，for

JavaScript中 for of 和 for in 的区别？

猫老板的豆

03-20

887

先说结论： for...in 循环出的是 key， for...of 循环出的是 value 。 for...of 是 ES6 新引入的特性，修复了 ES5 引入的 for...in 的不足。 for...of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用。推荐在循环对象属性的时候使用 for...in ，在遍历数组的时候的时候使用 for...of 。 let ...

ES6中的for-of循环

Kyoku0604的博客

11-28

515

最近ES6温故知新，发现它的出现，为程序员写代码添加了很多方便之处，for-of循环 for循环，语句繁琐，不易阅读 foreach循环，无法在循环结束前终止循环 for-in循环，循环默认结果为属性名，并且只遍历对象的可枚举属性 ...

ES6——for-in和for-of区别

weixin_30386713的博客

09-05

392

　　for-in和for-of乍一听，以为是一样的，都是用来“遍历”的。但是，既然开发出了两个方法，那就一定有所区别 iterable 　　首先，ES6中添加了一个iterable类型，翻译过来叫“可迭代”。　　在ES6里，数组Arrray、集合Set以及Map（目前我还不了解……）都是“可迭代的” 　　这个“可迭代”添加的目的在于二　　1.解决for-in遍历索引（...

10.ES6-for...in...和for...of...

weixin_43167546的博客

11-30

307

文章目录for...in...和for...of...一.for...of是ES6新引入的特性.修复了ES5引入的for...in的不足参考文档 for…in…和for…of… 一.for…of是ES6新引入的特性.修复了ES5引入的for…in的不足先定义一个数组:let aArray = ['a', 123, { a: '1', b: '2'}]; for...in循环 for(let ...

for in 和for of 的区别

qq_38152997的博客

12-15

415

最近在学习es6的知识，看到了for of 这新的循环方法，所以就测试一下和以前for in有什么不同，一下是一些不同地方，当然还有其他不同的，暂时还没有发现： for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果： ...

ES6中for...of循环与for...in循环有何不同？

极客前端探索者的博客

06-28

635

使用for...in遍历对象属性，但可能会遍历到原型链上的属性。使用for...of遍历可迭代对象的元素，通常用于数组、Map、Set 等数据结构。在遍历数组时，for...of是更合适的选择，因为它不会遍历到数组索引（除非数组本身包含这些索引作为元素），而且语法更简洁。堪称2024最强的前端面试场景题，让421人成功拿到offer。

循环结构（for/in 语句、for/of语句以及for of与for in 区别）

m0_71814235的博客

08-11

1193

循环结构（for/in 语句、for/of语句以及for of与for in 区别）

for...in/for...of

South Park

09-15

410

for...in/for...of

for-in 和 for-of 有什么区别

weixin_45087659的博客

12-16

708

for…of 是 ES6 新增的遍历方式，允许遍历一个含有 iterator 接口的数据结构（数组、对象等）并返回各项的值，和 ES3 中的 for…in 的区别如下： for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名 for…in 会遍历对象整个原型链，性能非常差，不推荐使用；而 for…of 只遍历当前对象，不会遍历原型链对于数组的遍历，for…in 会返回数组中所有可枚举的属性（包括原型链上可枚举的属性）；for…of 只返回数组的下标对应的属性值 ...

for...in 和 for...of 的区别

weixin_62548988的博客

08-02

129

JavaScript 原有的 for…in 循环，只能获得对象的键名，不能直接获取键值。ES6 提供 for…of 循环，允许遍历获得键值。