for in for of forEach

总结

 

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>