【快速入门系列】简述 for...in 和 for...of 区别
引言
在对数组或对象进行遍历时,我们经常会使用到两种方法:for...in
和 for...of
,那么这两种方法之间的区别是什么呢?让我们来研究研究。
一、for...in
首先我们看下MDN对for...in
方法的解释:for...in | MDN
for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性,例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。
首先,我们简单的使用for...in
分别对对象和数组进行遍历:
// 遍历对象
let obj = {a: 1,b: 2,c: 3
};
for(let item in obj) {console.log("item:" + item);console.log(obj[item]);
}// 运行结果
item:a
1
item:b
2
item:c
3
// 遍历数组
let arr = [1, 2, 3];
for(let item in arr) {console.log("item:" + item);console.log(arr[item]);
}// 运行结果
item:0
1
item:1
2
item:2
3
我们发现,使用for...in
进行遍历时,item值为对象的key,为数组的index。
我们知道,数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同,因此不能保证for...in
以某种固定的顺序返回索引,因此,不推荐使用for...in
进行数组的遍历。
下面,我们在上面代码的基础上,在arr数组上增加一个自定义属性,再次遍历,查看结果。
arr.name = 'arrName';
for(let item in arr) {console.log("item:" + item);console.log(arr[item]);
}// 运行结果
item:0
1
item:1
2
item:2
3
item:name
arrName
我们发现,for...in
不仅会遍历数组中的元素,还会遍历自定义属性。
二、for...of
说完for...in
我们再来看看for...of
,我们还是先来看看MDN对其的解释 for...of | MDN
for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
同样的,我们还是使用与for...in
相同的代码进行测试
// 遍历对象
let obj = {a: 1,b: 2,c: 3
};
for(let item of obj) {console.log("item:" + item);console.log(obj[item]);
}// 运行结果
for(let item of obj) {^TypeError: obj is not iterable
...
// 遍历数组
let arr = [1, 2, 3];
for(let item of arr) {console.log("item:" + item);console.log(arr[item]);
}// 运行结果
item:1
undefined
item:2
undefined
item:3
undefined
我们可以看出,使用for...of
对对象进行遍历时,报了TypeError: obj is not iterable
错误,对数组进行遍历时,item直接是数组每一项的值。
我们再为arr增加自定义属性,查看效果。
arr.name = 'arrName';
for(let item in arr) {console.log("item:" + item);console.log(arr[item]);
}// 运行结果
item:1
undefined
item:2
undefined
item:3
undefined
for...of
没有对数组的自定义属性进行遍历。
三、总结
根据以上测试结果并参考了相关资料,我们得出了以下结论:
- 遍历对象时推荐使用
for...in
,其中item为对象的key。使用for...of
会报错。 - 遍历数组时推荐使用
for...of
,其中item为数组每一项的值。使用for...in
则不能保证遍历顺序且会遍历出自定义属性。 for...in
是ES5特性,for...of
是ES6特性,因此需要注意兼容性。- 如果要使用
for...of
遍历普通对象,需要配合Object.keys()
一起使用。
结束语
以上内容是我们对for...in
和for...of
的测试对比,在使用时记住其区别可更快的编写代码和排查错误,若想了解其更深层区别,建议认真阅读MDN相关资料。
【快速入门系列】简述 for...in 和 for...of 区别相关推荐
- c# wpf listbox 高度_WPF快速入门系列(1)——WPF布局概览
一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...
- WPF快速入门系列(6)——WPF资源和样式
WPF快速入门系列(6)--WPF资源和样式 一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一 ...
- python r转义_Python快速入门系列之二:还学不会我直播跪搓衣板
Python作为一个,目前最火的编程语言之一,已经渗透到了各行各业.它易学好懂,拥有着丰富的库,功能齐全.人生苦短,就用Python. 这个快速入门系列分为六篇,包含了Python大部分基础知识,每篇 ...
- 2021-08-26 转载 Scala快速入门系列博客文章
作者:Huidoo_Yang 出处:http://www.cnblogs.com/yangp/ 本文版权归作者Huidoo_Yang和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面 ...
- 树莓派从零开始快速入门系列汇总
树莓派从零开始快速入门系列汇总 树莓派从零开始快速入门第0讲--环境安装 树莓派从零开始快速入门第1讲--命令行 树莓派从零开始快速入门第2讲--更换国内源 树莓派从零开始快速入门第3讲--文件编辑 ...
- 【物体检测快速入门系列 | 01 】基于Tensorflow2.x Object Detection API构建自定义物体检测器
这是机器未来的第1篇文章 原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124745966 CSDN话题挑战赛第1期 活动详情地址 ...
- NumPy 快速入门系列:应用统计学基础概念、相关统计指标与NumPy的实现
NumPy 快速入门系列:应用统计学基础概念.相关统计指标与NumPy的实现 前言: 统计学导论: 统计学定义: 统计学分类: 统计学基本概念: 统计过程: 统计指标与NumPy: 用 Python ...
- RHEL8.0快速入门系列笔记--理论知识储备(一)
RHEL8.0快速入门系列笔记–理论知识储备(一) 红帽公司发布Linux8.0系统已经有一段时间,最近准备学习关于RHEL8.0的相关新特性.根据官方介绍:RHEL8.0在云/容器化工作负载方面做了 ...
- 【Python零基础快速入门系列 | 03】AI数据容器底层核心之Python列表
• 这是机器未来的第7篇文章 原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124957520 <Python零基础快速入门 ...
- 【Python零基础快速入门系列 | 07】浪漫的数据容器:成双成对之字典
这是机器未来的第11篇文章 原文首发链接:https://blog.csdn.net/RobotFutures/article/details/125038890 <Python零基础快速入门系 ...
最新文章
- 影像组学视频学习笔记(14)-特征权重做图及美化、Li‘s have a solution and plan.
- fmdb和mysql的区别_FMDB
- pyqt5 + pyinstaller 制作爬虫小程序
- Linux进阶之路————组管理与权限管理
- day28 java的集合(6)Properties和TreeSet
- 1.7 LINUX启动流程
- DotText源码阅读(2)-工程、数据库表结构
- R可视化分析美国的肥胖症,嘿!
- 职场领导想逼你走时,他会用哪些奇招逼你走?
- android 修改图片定位位置信息,App Store 上的“PhotoMapper:照片地理位置修改,GPS EXIF编”...
- 今有物不知其数三三数之JAVA_今有物不知其数,三三数之剩二,五五数之剩三,七七数...
- android编程实例-音乐播放器之歌词显示
- Android权限Uri.parse的详细资料
- 基于React搭建个人空间(更新版)
- 计算数学学者网站推荐
- 信息论知识——基础梳理
- Linux I/O原理和零拷贝Zero-copy技术全面揭秘
- w ndows10装什么浏览器,win10怎么重装ie浏览器
- 【FPGA】Quartus导出.qxp格式的网表文件
- 阿里暑期实习c\c++研发工程师一面经历
热门文章
- oracle RAC的VIP和scan
- 好多Javascript日期选择器呀-6
- 在ASP.NET 2.0中建立站点导航层次
- Gin源码解析和例子——路由
- WMI技术介绍和应用——查询本地用户和组
- 程序员的自我修养--链接、装载与库笔记:内存
- 【Qt】Qt再学习(一):Application Example
- 【FFmpeg】截至ffmpeg4.2不推荐(Deprecate)继续使用的接口,以及代替它的接口汇总
- 当代的设计潮流是什么_解码“潮流合伙人”IP生意经
- 吃鸡服务器炸了会显示什么,绝地求生服务器再爆炸,还能不能好好吃鸡了?