注册

JS循环大总结, for, forEach,for in,for of, map区别

map(数组方法):


特性:



  1. map不改变原数组但是会 返回新数组
  2. 可以使用break中断循环,可以使用return返回到外层函数

实例:


let newarr=arr.map(i=>{
return i+=1;
console.log(i);
})
console.log(arr)//1,3,4---不会改变原数组
console.log(newarr)//[2,4,5]---返回新数组

forEach(数组方法):


特性:



  1. 便利的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少了出错的概率。
  2. 没有返回值
  3. 不能使用break中断循环,不能使用return返回到外层函数

实例:


let newarr=arr.forEach(i=>{
i+=1;
console.log(i);//2,4,5
})
console.log(arr)//[1,3,4]
console.log(newarr)//undefined

注意:



  1. forEach() 对于空数组是不会执行回调函数的。
  2. for可以用continue跳过循环中的一个迭代,forEach用continue会报错。
  3. forEach() 需要用 return 跳过循环中的一个迭代,跳过之后会执行下一个迭代。

for in(大部分用于对象):


用于循环遍历数组或对象属性


特性:


可以遍历数组的键名,遍历对象简洁方便
###实例:


   let person={name:"小白",age:28,city:"北京"}
let text=""
for (let i in person){
text+=person[i]
}
输出结果为:小白28北京
//其次在尝试一些数组
let arry=[1,2,3,4,5]
for (let i in arry){
console.log(arry[i])
}
//能输出出来,证明也是可以的

for of(不能遍历对象):


特性:



  1. (可遍历map,object,array,set string等)用来遍历数据,比如组中的值
  2. 避免了for in的所有缺点,可以使用break,continue和return,不仅支持数组的遍历,还可以遍历类似数组的对象。

   let arr=["nick","freddy","mike","james"];
for (let item of arr){
console.log(item)
}
//暑促结果为nice freddy mike james
//遍历对象
let person={name:"老王",age:23,city:"唐山"}
for (let item of person){
console.log(item)
}
//我们发现它是不可以的
//但是它和forEach有个解决方法,结尾介绍

总结:



  • forEach 遍历列表值,不能使用 break 语句或使用 return 语句
  • for in 遍历对象键值(key),或者数组下标,不推荐循环一个数组
  • for of 遍历列表值,允许遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等.在 ES6 中引入的 for of 循环,以替代 for in 和 forEach() ,并支持新的迭代协议。
  • for in循环出的是key,for of循环出的是value;
  • for of是ES6新引入的特性。修复了ES5的for in的不足;
  • for of不能循环普通的对象,需要通过和Object.keys()搭配使用。

链接:https://juejin.cn/post/6983313955233988644

0 个评论

要回复文章请先登录注册