通过实例解析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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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
留言板翻页的实现详解
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
python实现多线程的两种方式
2016/05/22 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
销售业务员岗位职责
2014/01/29 职场文书
经销商年会策划方案
2014/05/29 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
英文慰问信范文
2015/03/24 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python