通过实例解析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实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
wxPython实现画图板
2020/08/27 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
学校法制宣传日活动总结
2014/11/01 职场文书
店面出租协议书范本
2014/11/28 职场文书
基石观后感
2015/06/12 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
字节飞书面试promise.all实现示例
2022/06/16 Javascript