前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js for in for of 的区别

js for in for of 的区别

作者头像
用户6379025
发布于 2022-12-26 07:57:35
发布于 2022-12-26 07:57:35
1.6K00
代码可运行
举报
文章被收录于专栏:莫凡莫凡
运行总次数:0
代码可运行
区别

for…in 循环:只能获得对象的键名,不能获得键值 for…in 循环主要是为了遍历对象而生,不适用于遍历数组 for…of 循环:允许遍历获得键值 for…of 循环可以用来遍历数组、类数组对象,字符串、Set、Map 以及 Generator 对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//对于普通对象,没有部署原生的 iterator 接口,直接使用 for...of 会报错
var obj = {
   'name': 'lin',
   'age': 12
 }
 
 for(let key of obj) {
   console.log('for of obj', key)   // VM1263:6 Uncaught TypeError: obj is not iterable
    at <anonymous>:6:17
 }
//for...in 循环不仅遍历数字键名,还会遍历手动添加的其它键,甚至包括原型链上的键。for...of 则不会这样
let arr = [1, 2, 3,]
arr.set = 'hello world'  // 手动添加的键
Array.prototype.name = 'hello hi'  // 原型链上的键
 
for(let item in arr) {
  console.log('item', item)
}
//item 0
// item 1
// item 2
// item set
// item name

for(let value of arr) {
  console.log('value', value)
}
//item 0
// item 1
// item 2


//forEach 循环无法中途跳出,break 命令或 return 命令都不能奏效
  arr.forEach(item => {
  if(item % 2 === 0) {
    break
  }
  console.log('item', item)
})

//Uncaught SyntaxError: Illegal break statement at Array.forEach (<anonymous>at <anonymous>:1:5
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗
for循环是JS里最简单也是最通用的遍历方式,我们需要知道遍历的次数。 for循环里return,break等关键字都是可以用的
henu_Newxc03
2022/04/13
1.5K0
一次性搞明白 5 种 for 循环的用法
来源 | https://www.toutiao.com/article/7084114231976657408/
前端达人
2022/04/18
3.3K0
for of 的原理解析
这里的所有数据结构只指具有iterator接口的数据。一个数据只要部署了 Symbol.iterator,就具有了 iterator接口,就可以使用 for...of 循环遍历它的成员。也就是说,for...of循环内部调用的数据结构为Symbol.iterator方法。
木子星兮
2020/07/16
6330
ES6中的Iterator 和for of循环
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。
青梅煮码
2023/02/18
8570
JavaScript 学习-4.Array数组遍历的几种方式
前言 Array 数组遍历的几种方式 普通for循环 循环遍历基础语法 for(var i = 0; i < arr.length; i++){ ... } 使用示例 var arr1 = ['hello', 'world', 'aa']; for (var i=0; i<arr1.length; i++){ console.log(i) // 下标 console.log(arr1[i]) // 成员 } 运行结果 for…in for...in 循环的是数组下标,语
上海-悠悠
2022/05/16
1K0
JavaScript 学习-4.Array数组遍历的几种方式
es6 -- Iterator 和 for...of 循环
JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。
小蔚
2019/09/11
7850
Iterator 、Generator
JS里原有的表示”集合“的数据结构,主要是Array和Object,ES6又添加了Map和Set。我们可以任意组合和设计数据的结构,那么就需要一个机制,可处理所有不同的数据结构。
用户3258338
2019/08/13
6210
关于JS中的循环
for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。
mafeifan
2018/09/10
2.7K0
JS面试题-es6 新增 for of 循环详解
创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合),Arguments 等可迭代的数据结构等。
用户10106350
2022/10/28
4900
ECMAScript6 基础知识点(下)
Symbol 为独一无二的值,当 Symbol 值作为对象的属性名的时候,不能用点运算符获取对应的值,因为用点运算符的话,会导致 JavaScript 把后面的属性名为理解为一个字符串类型,而不是 Symbol 类型
Nian糕
2020/05/18
3690
ECMAScript6 基础知识点(下)
JavaScript 中哪一种循环最快呢?
最让我感到惊讶的事情是,当我在本地计算机上进行测试之后,我不得不接受 for(倒序)是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。
ConardLi
2021/04/07
1.1K0
JavaScript 中哪一种循环最快呢?
ECMAScript 6 笔记(五)
Iterator接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环
超然
2018/08/03
6150
9种JS数组去重的高阶方法思路,值得借鉴
一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下。
前端达人
2021/06/16
9410
js中的四种for循环
最近刷题时遇到了几种不同for循环,因为没有深入了解导致做题时无法区分它们的用法,尤其是在以及在使用时的注意点。
用户7741497
2022/03/06
2K0
JavaScript中的forEach,你踩过哪些坑?请避开这些常见误区
在JavaScript的世界里,forEach是我们常用的数组遍历方法之一。大多数开发者都熟悉它的基础用法,但你知道吗?在处理异步操作时,forEach可能会让你掉进一些意想不到的“坑”。这篇文章将带你深入了解forEach的特性和局限,揭示一些你可能不知道的使用技巧和解决方案。无论你是前端新手,还是经验丰富的开发者,都能从中学到有用的知识,帮助你在实际项目中避开那些隐藏的陷阱。准备好了吗?让我们一探究竟!
前端达人
2024/11/25
3200
JavaScript中的forEach,你踩过哪些坑?请避开这些常见误区
forEach、for in 、 for of三者的区别
在开发过程中经常需要循环遍历数组或者对象,forEach、for in 、 for of这三种方法使用最多 但却一值傻傻分不清楚。。今天来一个大区分。。
青梅煮码
2023/03/02
2910
前端 JavaScript 中的三种 for 循环语句总结
JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用。今天,我来总结一下前端 JavaScript 中三种 for 循环语句。
编程三昧
2021/06/27
1.5K0
2022秋招前端面试题(七)(附答案)
OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法,客户端可以在采取具体资源请求之前,决定对该资源采取何种必要措施,或者了解服务器的性能。该请求方法的响应不能缓存。
helloworld1024
2022/08/09
8170
for 循环的 5 种写法,哪种最快?
来源:juejin.im/post/5ea63f3ef265da47b177b4b6
Leetcode名企之路
2021/10/08
1K0
JS数组和对象的遍历方式,以及几种方式的比较
在JavaScript中,遍历数组和对象有多种方式。下面我将介绍几种常见的遍历方式,并对它们进行比较。
老K博客
2023/12/18
7210
相关推荐
还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验