时间:2021-05-25
对数组的遍历大家最常用的就是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,100for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 所以for in更适合遍历对象,不要使用for in遍历数组。JavaScript for in 和 for of 的区别
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript解析及序列化JSON的方法。分享给大家供大家参考,具体如下:JSON之所以这么流行,是因为JSON数据结构可以被解析为Java
本文实例讲述了javascript解析ajax返回的xml和json格式数据。分享给大家供大家参考,具体如下:写个例子,以备后用一、JavaScript解析返回
参考原文AndroidPopupWindow用法解析进行学习,通过实例及PopupWindow源码分析了PopupWindow的使用。文章最后的“补充Case:
Javascript实现计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)小型JavaScript计算器
Javascript计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)Javascript计算器->添加