for in for of forEach

本文深入探讨了JavaScript中for...of和for...in循环的使用方法及区别,通过实例展示了如何利用这两种循环进行数组和对象的遍历,并解析了常见错误如'Uncaught TypeError: obj is not iterable'的原因。

总结

 

continue,break,return

continue

立即退出循环,但会再次从循环顶部开始执行。

跳出本次循环,执行下一次循环。

break

立即退出循环,强制执行循环后的下一条语句。

使程序终止循环,执行后面的语句,常与if,switch一起使用。

return

将指定值/表达式带到调用函数的位置。

终止当前函数的执行。

有输出,调用函数就可以接收返回值。

在 JavaScript 中,for 循环中不能使用 return false 来中断循环

return false 用于从函数中返回值并退出函数执行,而不是用来控制循环的流程。

如果你想要中断 for 循环,可以使用 break 语句。

JavaScript中

for...in 循环语句用于遍历对象

对象使用 for of 循环报错 :Uncaught TypeError: obj is not iterable。

for...of 循环语句用于遍历数组

它们在工作方式和适用场景上存在显著差异。

for in 遍历对象  

 - for...in 循环用于遍历对象的可枚举属性,包括对象本身的属性以及从原型链上继承的属性。它返回的是对象的属性名(或数组的索引)。  

 - for...of 循环用于遍历可迭代对象(如数组、字符串、Map、Set等)的值。它直接获取元素的值,而不需要关心索引或键。

for of 遍历数组  

- for...in 循环在遍历数组时,会返回数组的索引(字符串形式),可能会导致意外结果。    

- for...of 循环在遍历数组时,返回数组中所有可枚举的属性,包括原型链上可枚举的属性,并且返回数组的下标对应的属性值。

性能 

 - for...in 循环在遍历对象时,会遍历其原型链上的可枚举属性,性能较差。    

- for...of 循环在处理大型数据集时表现更好,因为它不会受到原型链的影响。

适用场景    

- for...in 适合用于遍历对象,特别是当需要访问对象的属性时。    

- for...of 适合遍历数组、字符串等可迭代对象,特别是在处理列表或序列时更为简洁和直观。

数组 forEach()

forEach() 没有返回值,相当于使用 for 循环遍历数组。

forEach() 两个参数:

函数:有三个参数:数组元素,元素索引,数组本身。

可选的作为函数运行上下文的作用域对象(影响函数中this的值)。

不改变原数组。

数组方法 forEach() 不能使用break ,报错 Uncaught SyntaxError: Illegal break statement。 forEach()不支持使用 break 语句来提前终止循环。

这是因为 forEach() 的设计初衷是为了简化数组的遍历操作,并且其回调函数并没有返回值控制整个迭代过程。

测试

代码

<script>
Array.prototype.test=function(){
 console.log(this.length);
}
var arr = [11,22,33,44,55];
arr.five = "测试";
arr.name="数组" 

console.log(arr);

arr.forEach(value => {
  if(value > 22) {
    console.log(value)
    return false
  }
})

// arr.forEach(value => {
//   if(value > 22) {
//     console.log(value)
//      break
//   }
// })

for(let i in arr) {
  console.log(i)
}

for(let i of arr) {
  console.log(i)
}

for(let i in arr) {
  if(i > 2) {
    console.log(i)
    break
  } 
}

for (let i of arr) {
  if(i > 22) {
    console.log(i);
    break
  } 
}

// for(let i in arr) {
//   if(i > 2) {
//     console.log(i)
//     return false
//   } 
// }

// for (let i of arr) {
//   if(i > 22) {
//     console.log(i);
//     return false
//   } 
// }

var obj={
  name:"mumu",
  age:"18",
  deep:{
    a:"test a"
  }
}

for (let i in obj) {
  console.log(i);
}

for (let i in obj) {
  if(i == "name"){
    console.log(i);
    break;
  }
}

// for (let i in obj) {
//   if(i == "name"){
//     console.log(i);
//     return false;
//   }
// }

// for (let i of obj) {
//   console.log(i);
// }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端开发_穆金秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值