forEach for-in for-of的区别

时间:2021-6-19 作者:qvyue

for 可以使用break跳出循环 continue跳过本次循环

首先最基础的就是for循环了

for(var i=0;i

forEach

只能循环数组,不能使用break continue(会直接报错),使用return可以条跳过当前循环,继续后边的

let obj = {a: '1', b: '2', c: '3', d: '4'}
arr.forEach(function (val, idx, arr)
{
  if(idx==1){
    //break
  }
  console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组
  console.log(arr)
})

for in数组或者对象

如下可见 for in 循环遍历的值都是数据结构的键值 可以使用break和continue

let arr = ['a', 'b', 'c', 'd']
for (let o in arr) {
    console.log(o)    
    //log: 0,1,2,3,4
}

for of

是es6新增加的 用来循环获取一对键值对中的值 可以使用break和continue

let arr = ['a', 'b', 'c', 'd']
for (let o of arr) {
  console.log(o)    
//log: a,b,cd
}

https://es6.ruanyifeng.com/#docs/iterator
一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,就可以用for…of循环遍历它的成员。也就是说,for…of循环内部调用的是数据结构的Symbol.iterator方法。
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串

对于普通的对象使用for of会报错

forEach for-in for-of的区别
image.png

主要区别

mdn上解释的很清楚
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of
个人理解过来:
for in以任意顺序迭代对象的所有可枚举的属性,包括一个对象上原型上添加的属性等也将会被枚举出来
for of 遍历可迭代对象定义的要迭代的数据

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

for (let i in iterable) {
  console.log(i); // logs 0 1 2  foo arrCustom  objCustom 
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。