for、forEach 、for in、for of 循环的区别

  1. for:遍历数组

//对象数组
var arr = [ {Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'} ]
for (var i=0; i<arr.length;i++){ // i是下标(索引)
console.log(i)
console.log(arr[i])
}
结果:0
{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}

//数组
var arr = ["星期一","星期二","星期三"]
for (var j=0; j<arr.length;j++){// j是下标(索引)
console.log(j)
console.log(arr[j])
}

结果:
0
星期一
1
星期二
2
星期三


  1. forEach:遍历数组,但不能使用break、continue和return语句

//对象数组
var arr = [
{guangzhou: '广州', shanghai: '上海', beijing: '北京'},
{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
]
arr.forEach(function(value,index){ //第一个参数是值,第二个参数是下标(索引)
console.log(value)
console.log(index)
})
结果:{guangzhou: '广州', shanghai: '上海', beijing: '北京'},
0
{Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'}
1

//数组
var arr = ["星期一","星期二","星期三"];
arr.forEach(function(value,index){//第一个参数是值,第二个参数是下标(索引)
console.log(value)
console.log(index)
})
结果:
星期一
0
星期二
1
星期三
2


for…in:遍历数组索引、对象的属性
使用for…in遍历时,原型链上的所有属性都将被访问
例如:

//数组
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){ // i是下标(索引)
console.log(arr[i])
}
结果:
星期一
星期二
星期三
["放假","休息咯"]

如果把该例子的数组,写成像上面的对象数组,效果与数组也是一样的,就不再次用对象数组来测试了。

//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){
console.log(obj[i])
}
结果:广州
上海
北京
{shenzhen:“深圳”}

解决方法:使用hasOwnProperty()
hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。

//数组
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){
if(arr.hasOwnProperty(i)){
console.log(arr[i])
}
}

结果:星期一
星期二
星期三

//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
Object.prototype.something2={shenzhen:'深圳'}
for (var i in obj){
if(obj.hasOwnProperty(i)){
console.log(obj[i])
}
}
结果:广州
上海
北京


for…of:遍历数组的值

//数组
var arr = ["星期一","星期二","星期三"];
for (var i of arr){ //i是值
console.log(i)
}
//对象
var obj = {guangzhou: '广州', shanghai: '上海', beijing: '北京'}
for (var i of obj){ //i是值
console.log(i)
}
//对象会报错:Uncaught TypeError: obj is not iterable
//不能遍历一个普通的对象,可以通过 内建Object.keys() 方法让 for..of 也支持
//我也还没有试过,这里就先不测试了,之后再研究下

结果:星期一
星期二
星期三
obj对象的结果:报错,obj is not iterable

总结:
for(最原始的写法)、 forEach(ES5,但是它不支持使用break、continue和return语句)、for…of(ES6,循环数组的元素值)这三个是循环数组(对象数组)的;
for…in循环数组索引、对象的属性,但使用 for…in 原型链上的所有属性都将被访问,用 hasOwnProperty() 方法解决。

https://blog.csdn.net/demiling/article/details/83146361

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,981评论 1 45
  • 如何控制alert中的换行?\n alert(“p\np”); 请编写一个JavaScript函数 parseQu...
    heyunqiang99阅读 4,721评论 0 6
  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 8,196评论 0 0
  • @陈镜 杜科长 还挺会说话的 我联系你 你就说想我 见了面 都不搭理人家 谁知道你 想谁哩 要是真想 以后不要总躲...
    关中陈镜阅读 2,972评论 3 3
  • 易效能时间管理的学习坚持六十多天,曾经怀疑过这个活动是不是过于形式化,听课打卡,也曾经只为打卡而怠慢过,尽管中间有...
    悠悠我心8228阅读 1,040评论 0 0