ES6 中的迭代器(Iterator)

ES6迭代器

迭代器（Iterator）

什么是迭代？

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

Iterator 的作用：

• 为各种数据结构， 提供一个统一的接口
• 使得数据结构的成员能够按某种次序排列
• 迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完

迭代和遍历的区别？

迭代强调的依次取出，不能确定可以取出的值有多少，也不能保证去吧数据全部取完
遍历必须保证数据的长度，循环不断的全部取出，针对于数据量过大的情况下使用遍历需要时间过长

基本语法

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

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

接下来封装一个迭代器

  	function createIterator(item){
            let i = 0
            return {
                next(){
                    var result = {
                        value : item[i],
                        done : i >= item.length
                    }
                    i ++;
                    return result;
                }
            }
        }
        // 创建一个迭代器
	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 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象,
   对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束
3. 当done为true时，迭代结束

应用

在es6中,如果对象具有知名符号的属性 Symbol.iterator,则表示对象可以迭代
ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for…of循环遍历：

	const arr = [464,878,88,22,45,4,8,7];
	const iterator = arr[Symbol.iterator]();

	iterator.next() //{value: 464, done: false}
	iterator.next() //{value: 878, done: false}
	iterator.next() //{value: 88, done: false}
	...

自定义可迭代对象：

	const obj = {
            a : 1,
            b : 2,
            [Symbol.iterator](){ // for of肯定会走进symbol.iterator函数中的
               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属性）：

  • 字符串(String)
  • 数组（Array）
  • 数据结构-Set
  • 数据结构-Map
  • 类型数组 ( TypedArray )
  • 函数的arguments对象
  • NodeList 对象

for…of循环

for of 循环遍历、就是专门针对可迭代对象的，不是可迭代对象不能使用 for of循环
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);
	}
	//[0, "a"]
	//[1, "b"]
	//[2, "c"]

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

迭代器

最后

以上就是踏实月亮为你收集整理的ES6 中的迭代器(Iterator)的全部内容，希望文章能够帮你解决ES6 中的迭代器(Iterator)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。