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

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()搭配使用。
文章分类
前端
文章标签