forEach、for-in与for-of的区别

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循环。
哪些数据结构部署了 Symbol.iteratoer属性了呢?

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

假如一个普通的对象,如果想实现可迭代可用以下方法
方法一:

let a = {
    q: 1,
    d: 'ddd'
}
a[Symbol.iterator] = function () {
    let index = 0
    const keys = Object.keys(this)
    return {
        next: () => {
            return {
                value: this[keys[index]],
                done: index++ == keys.length 
            }
        }
    }
}

方法二:

a[Symbol.iterator] = function * () {
    let index = 0
    let keys = Object.keys(this)
    while(index !== keys.length) {
        yield this[keys[index++]]
    }
}
posted @ 2022-07-11 20:03  做一只不被遗忘的小强  阅读(1146)  评论(0编辑  收藏  举报