乐趣区

for-infor-offorEach-对比

1 forEach
forEach 专门用来循环数组,可以直接取到元素,同时也可以取到 index 值, 不可以遍历对象
缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,
方法不能使用 break,continue 语句跳出循环,或者使用 return 从函数体返回,对于空数组不会执行回调函数

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

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

2 for in
定义:用于循环遍历数组或对象属性,fot in 循环里面的 index 是 string 类型的,代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。一般循环遍历的都是对象的属性,遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性,key 会变成字符串类型
缺点:某些情况下,会出现随机顺序的遍历,因为里面的值是 string 类型,所以 增加了转换过程,因此开销较大
优点:可以遍历数组的键名,遍历对象简洁方便

 let arr = [1,2,3,4];
 arr.b='100';
 for(let key in arr){console.log(key);// 会把 b 也输出来
    }

3 for of

for of 是 ES6 新引入的特性。修复了 ES5 中 for in 的不足

允许遍历 Arrays(数组)、Strings(字符串)、Maps(映射)、Sets(集合)等可迭代的数据结构

for of 支持 return, 只能遍历数组不能遍历对象(遍历对象需要通过和 Object.keys()搭配使用)

一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator 接口可以使用 for of 循环。例子中的 obj 对象没有 Symbol.iterator 属性 所以会报错。
哪些数据结构部署了 Symbol.iteratoer 属性了呢?

  • 数组 Array
  • Map
  • Set
  • String
  • arguments 对象
  • Nodelist 对象, 就是获取的 dom 列表集合
退出移动版