通过实例解析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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
js post方式传递提交的实现代码
May 31 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php实现源代码加密的方法
2015/07/11 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js使用递归解析xml
2014/12/12 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
进程的查看和调度分别使用什么命令
2015/03/25 面试题
2014年班主任自我评价范文
2014/04/23 职场文书
热情服务标语
2014/10/07 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
大学生在校表现评语
2014/12/31 职场文书
大学生实习介绍信
2015/05/05 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
卫生主题班会
2015/08/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
远程教育学习心得体会
2016/01/23 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书