迭代器 Iterator

ES6迭代器

迭代器（Iterator）

介绍

Iterator迭代器从一个数据集合中按照一定的顺序，不断的取出数据的过程

Iterator的作用：

• 为各种数据结构，通提供一个接口
• 使得数据结构的成员能够按某种次序排列
• ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
• 迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完

基本语法

迭代器是一种特殊对象，每个迭代对象都有一个next()方法，该方法有两个属性：

• value：返回查询的值
• done：判断是否迭代结束，返回值为布尔

function createIterator(items){
  	var nextIndex  = 0;
  	return{
    	next(){
      		var done = (nextIndex  >= items.length);
      		var value = !done ? items[nextIndex ++] : undefined;
            return{
                done,
                value
            }
    	}
  	}
}

// 创建一个迭代器
var a = createIterator([1,2,3]);

console.log(a.next()); // {done: false, value: 1}
console.log(a.next()); // {done: false, value: 2}
console.log(a.next()); // {done: false, value: 3}
console.log(a.next()); // {done: true, value: undefined}

分析Iterator的遍历过程：

1. 创建一个对象，指向当前数据结构的起始位置。（指针）
2. 第一次调用指针对象的next(),指针指向数据结构的第一个成员
3. 第二次调用指针对象的next(),指针指向数据结构的第二个成员
4. 第n次调用指针对象的next(),指针指向数据结构的第n个成员
5. 当done为true时，迭代结束

应用

在es6中,如果对象具有知名符号的属性 Symbol.iterator,则表示对象可以迭代

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for…of循环遍历：

const arr = [545,874854,15485,54854,6];
const iterator = arr[Symbol.iterator]();

iterator.next() // { value: 545, done: false }
iterator.next() // { value: 874854, done: false }

自定义可迭代对象：

const obj = {
    a : 1,
    b : 2,
    [Symbol.iterator](){   //for of循环肯定是会走到这个函数中的
        const keys = Object.keys(this);
        let i = 0;
        return {
            next:() => {
                const propName = keys[i];
                const propValue = this[propName];
                const result = {
                    value : {
                        propName,
                        propValue,
                        name : "name"
                    },
                    done : i >= keys.length
                }
                i ++;
                return result;
            }
        }
    }
}

for(const item of obj){
    console.log(item)
}

调用Iterator接口的场合:

• 解构赋值：对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法
• 扩展运算符：扩展运算符（…）也会调用默认的 Iterator 接口
• yield：yield后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口
• 原生具备Iterator接口的数据结构（部署了Symbol.iterator属性）：
  • 字符串（类数组）
  • 数组（Array）
  • 数据结构-Set
  • 数据结构-Map
  • TypedArray
  • 函数的arguments对象
  • NodeList 对象

回到顶部 目录

for…of循环

for of 循环就是专门遍历可迭代的对象的,不是可迭代的对象不能使用forof遍历

for…of循环内部调用的是：数据结构的Symbol.iterator方法，所以只要是能调用Iterator接口的场合都可以使用

语法

for (variable of iterable) {
    //statements
}

• variable：在每次迭代中，将不同属性的值分配给变量
• iterable：被迭代枚举其属性的对象

基本操作

有些数据结构是在现有数据结构的基础上，计算生成的，比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象：

• entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组
• keys() 返回一个遍历器对象，用来遍历所有的键名
• values() 返回一个遍历器对象，用来遍历所有的键值

let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}

for…of与for…in的区别

• for…in 语句以任意顺序迭代对象的可枚举属性
• for…of 语句遍历可迭代对象定义要迭代的数据
• 就来数组来说for…in 的是下标，for…of的是value

let iterable = [10, 20, 30];
for (const value of iterable) {
    console.log(value);
}
// 10,20,30
for (const i in iterable) {
    console.log(i);
}
// 0,1,2

回到顶部 目录