ES6 迭代器、以及（for...in、for...of、forEach、map的区别和共同点）

男娘i 2022-12-01 15:50 149阅读 0赞

## 迭代器 ##

**迭代器（lterator）是一种接口，为各种不同的数据结构，提供统一的访问机制。  
任何数据结构只要部署迭代器（lterator），就可以完成遍历操作**

**1）. ES6创造了一种新的遍历命令for…of循环，lterator 接口主要供for…of消费  
2）. 原生具备lterator 接口的数据（可用for…of遍历）**  
**Array  
Arguments  
Set  
Map  
String  
TypedArray  
NodeList**

**for…in、for…of、forEach的区别和共同点**

## for…of 一般用来遍历 “ 数组（或类数组）” （不可以遍历对象，会报错） ##

**for…of 会对数组中的每一项进行遍历，并返回数组每一项的值**

const arr = ["rookie", "theshy", "ning", "puff", "boolean"]
    for (const value of arr) { 
        console.log(value)
    }
    // rookie theshy ning puff boolean

## for…in 一般用来遍历 “ 对象 ”（也可以遍历数组，但只返回index值） ##

**遍历对象**

const objIG = { 
        number: "5",
        mid: "rookie",
        top: "theshy",
        jg: "ning",
        adc: "puff",
        sup: "boolean"
    }
    for (const key in objIG) { 
        // 输出key值， 键名 number mid top jg adc sup
        console.log(key) 
        // 输出value值，键值 5 rookie theshy ning puff boolean
        console.log(objIG[key])
    }

**遍历数组**

const arr = ["rookie", "theshy", "ning", "puff", "boolean"]
    for (const key in arr) {  
    	// 返回 index 0 1 2 3 4 
        console.log(key)
        // 返回 值 rookie, theshy, ning, puff, boolean
        console.log(arr[key])
    }

## forEach 、map ##

**相同点：  
1 .都是循环遍历数组中的每一项  
2 .forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）  
3 .匿名函数中的this都是指向window  
4 .只能遍历数组  
5 .都不会改变原数组**  
**区别：  
map方法  
1 .map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。  
2 .map方法不会对空数组进行检测，map方法不会改变原始数组。**

const arr = ["rookie", "theshy", "ning", "puff", "boolean"]
    const newArr = arr.map(function (currentValue, index, arr) { 
        return index + 1 + ":" + currentValue
    });
    // (5) ["1:rookie", "2:theshy", "3:ning", "4:puff", "5:boolean"]