JS中的forEach,for in,for of和for的遍历优缺点及区别

Posted Larry Wang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中的forEach,for in,for of和for的遍历优缺点及区别相关的知识,希望对你有一定的参考价值。

forEach:(可以三个参数,第一个是value,第二个是index,第三个是数组体)

              缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,

                         方法不能使用break,continue语句跳出循环,或者使用return从函数体返回,对于空数组不会执行回调函数

              优点:便利的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少了出错的效率

              定义:用于调用数组的每个元素,并将元素传递给回调函数

              实例:

//我们先用它来遍历数组
  let arry=[9,8,7,6,5,4]
  array.forEach(function(value,index,arr){
      console.log(value)
  })
//输出结果为9 8 7 6 5 4

//首先有人疑问它能不能用来遍历对象(一开始我也不知道)? //我们用它来遍历对象试试可不可以 let obj={a:1,b:2,c:3,d:4} obj.forEach(function(value,index,oObj){ console.log(value) } //输出结果会是obj.forEach is not a function, //所以forEach不可以遍历对象,这也是它和for in的一个区别

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

      定义:用于循环遍历数组或对象属性,fot in循环里面的index是string类型的,

                 代码每执行一次,就会对数组的元素或者对象的属性进行一次操作

     缺点:某些情况下,会出现随机顺序的遍历,因为里面的值是string类型,所以
                增加了转换过程,因此开销较大

     优点:可以遍历数组的键名,遍历对象简洁方便

     实例:

//首先遍历对象
   let person={name:"老王",age:23,city:"大唐"}
   let text=""
   for (let i in person){
      text+=person[i]
   }
   输出结果为:老王23大唐

//其次在尝试一些数组
   let arry=[1,2,3,4,5]
   for (let i in arry){
        console.log(arry[i])
    }
//能输出出来,证明也是可以的

for of:(可遍历map,object,array,set string等)用来遍历数据,比如组中的值,

                   map,set会在下篇文章详解,这节只查看遍历对象和数组

       优点:避免了for in的所有缺点,可以使用break,continue和return,不仅支持

                 数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历
                最简洁,最直接的遍历数组的语法
                支持map和Set对象遍历

      缺点:不适用于处理原有的原生对象(原生对象是一个子集,包含一些在运动过程中动态创建的对象)

      实例:

//遍历数组
   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有个解决方法,结尾介绍

for:

      优点:程序简洁,结构清晰,循环初始化,循环变量化,循环体和循环条件位置突出

          缺点:结构比while循环复杂,容易出编码错误

          实例:

//首先它和forEach,forof一样不可以遍历对象
//解决办法:就是把对象先转化为数组类型- -
//有一个对象:
     let obj={a:1,b:2,c:3}
//用Object.keys属性转化
     let obj2=Object.keys(obj)
//最后就可以用来遍历了
   for (let i=0;i<obj2.length;i++){
     console.log(obj2[i])
   }
//输出结果就能出来了,forEach,for of同理

 





以上是关于JS中的forEach,for in,for of和for的遍历优缺点及区别的主要内容,如果未能解决你的问题,请参考以下文章

JS中的forEach,for in,for of和for的遍历优缺点及区别

js的forEach,for in , for of

js 各种循环的区别与用法(for in,forEach,for of)

js中forEach,for in,for of的区别

前端js的数组的循环遍历 for / for of / for in / arr.forEach()

js遍历集和(Array,Map,Set) (forEach, map, for, for...in, for...of)