通过实例解析JavaScript for in及for of区别


Posted in Javascript onJune 15, 2020

对数组的遍历大家最常用的就是for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。

那么接下来我们一起看一下for in 和for of 的区别吧。

for in

看一个简单的例子

//for in 应用于数组
Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,10,30,100];
myArray.name='数组';
 
for(let index in myArray){
  console.log(index);
}
//输出结果如下
0,1,2,3,4,name,str,sayHello
 
//for in 应用于对象中
Object.prototype.sayHello = function(){
  console.log('Hello');
}
Obeject.prototype.str = 'World';
var myObject = {name:'zhangsan',age:100};
 
for(let index in myObject){
  console.log(index);
}
//输出结果
name,age,str,sayHello
//首先输出的是对象的属性名,再是对象原型中的属性和方法,
//如果不想让其输出原型中的属性和方法,可以使用hasOwnProperty方法进行过滤
for(let index in myObject){
  if(myObject.hasOwnProperty(index)){
    console.log(index)
  }
}
//输出结果为
name,age
//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。
Object.keys(myObject)

可以看出for in 应用于数组循环返回的是数组的下标和数组的属性和原型上的方法和属性,而for in应用于对象循环返回的是对象的属性名和原型中的方法和属性。

使用for in 也可以遍历数组,但是会存在以下问题:

1.index索引为字符串型数字,不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

Object.prototype.sayHello = function(){
  console.log('Hello');
}
var myObject = {
  name:'zhangsan',
  age:10
}
 
for(let key of myObject){
  consoloe.log(key);
}
//输出结果
//typeError
 
Array.prototype.sayHello = function(){
  console.log("Hello");
}
var myArray = [1,200,3,400,100];
for(let key of myArray){
  console.log(key);
}
//输出结果
1,200,3,400,100

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 所以for in更适合遍历对象,不要使用for in遍历数组。JavaScript for in 和 for of 的区别

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript事件问题
Sep 05 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
vue proxy 的优势与使用场景实现
Jun 15 #Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 #Javascript
为react组件库添加typescript类型提示的方法
Jun 15 #Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 #Javascript
浅谈Vue 自动化部署打包上线
Jun 14 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
提升PHP执行速度全攻略
2006/10/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
js+html5实现复制文字按钮
2017/07/15 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python中six模块基础用法
2019/12/08 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
安全大检查反思材料
2014/01/31 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
无房证明范本
2014/09/17 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android