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

 更新时间:2020年06月15日 11:03:23   作者:ssaylo  
这篇文章主要介绍了通过实例解析JavaScript for in及for of区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

对数组的遍历大家最常用的就是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判断变量是否有值的方法

    这篇文章主要介绍了javascript判断变量是否有值的方法,可实现有效判断值的功能,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 基于JS实现简单滑块拼图游戏

    基于JS实现简单滑块拼图游戏

    本文通过实例代码给大家介绍了JS实现简单滑块拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-10-10
  • javascript appendChild,innerHTML,join性能比较代码

    javascript appendChild,innerHTML,join性能比较代码

    在实际应用中,应该避免直接用innerHTML,对于大量的字符连接运算,应该考虑先运算再输出。
    2009-08-08
  • JavaScript自定义Webpack配置实现流程介绍

    JavaScript自定义Webpack配置实现流程介绍

    本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-10-10
  • JS文本获得焦点清除文本文字的示例代码

    JS文本获得焦点清除文本文字的示例代码

    本篇文章主要是对JS文本获得焦点清除文本文字的示例代码进行介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • TypeScript与JavaScript项目里引入MD5校验和

    TypeScript与JavaScript项目里引入MD5校验和

    这篇文章主要介绍了TypeScript与JavaScript项目里引入MD5校验和,MD5校验和可以用于验证网络文件传输的完整性以及防止文件被人篡改。下文我们就一起来学习TypeScript与JavaScript项目里引入MD5校验和_MD5校验,需要的朋友可以参考一下
    2022-02-02
  • 按钮JS复制文本框和表格的代码

    按钮JS复制文本框和表格的代码

    有时候我们需要复制一个框的内容或者整个表格,一般的操作很可能造成一些不方便,一是操作步骤较为复制,一是复制表格的时候容易复制不完整或者格式出错。
    2011-04-04
  • 纯js模拟div层弹性运动的方法

    纯js模拟div层弹性运动的方法

    这篇文章主要介绍了纯js模拟div层弹性运动的方法,涉及javascript操作div层实现运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js实现一个链接打开两个链接地址的方法

    js实现一个链接打开两个链接地址的方法

    这篇文章主要介绍了js实现一个链接打开两个链接地址的方法,可实现连续打开两个链接的功能,非常简单实用的技巧,需要的朋友可以参考下
    2015-05-05
  • Echarts图例组件的属性与源代码

    Echarts图例组件的属性与源代码

    图例组件展现了不同系列的标记(symbol),颜色和名字,可以通过点击图例控制哪些系列不显示,这篇文章主要给大家介绍了关于Echarts图例组件的相关资料,需要的朋友可以参考下
    2021-06-06

最新评论