es6+最佳入门实践

Posted 2021-02-08 dadifeihong

9.Iterator和for...of

9.1.Iterator是什么？

Iterator又叫做迭代器，它是一种接口，为各种不同的数据结构提供统一的访问机制。这里说的接口可以形象的理解为USB接口，有了这个接口可以做不同的事情，在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的。而Iterator接口提供的统一访问机制主要表现为遍历操作，任何数据类型只要具有Iterator接口，就可以完成遍历操作(遍历操作指依次处理该数据结构的所有成员)，总结起来就是说我们需要一种统一的机制来依次处理某种数据结构的所有成员，这种处理机制就是Iterator所做的事情

下面我们来实现这种机制，它需要具备依次处理数据结构的所有成员，那意味着我们执行一次方法就可以处理一个成员

function Iterator(arr) {
    var index = 0;
    return {
        next: function () {
            if(index < arr.length){
                return {value: arr[index++]}
            }else {
                return {done: false}
            }
        }
    }
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());    function Iterator(arr) {
    var index = 0;
    return {
        next: function () {
            if(index < arr.length){
                return {value: arr[index++]}
            }else {
                return {done: false}
            }
        }
    }
}
var it = Iterator([1,2,3]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

一种数据结构只要部署了Iterator接口，我们就称这种数据结构是可以迭代的，在ES6中，只要是一个数据结构具有了Symbol.iterator属性，那么就认为是可迭代的，其实，Symbol.iterator就是一个函数，实现的功能和我们上面手写的功能差不多。

在ES6中，有些数据结构原生就具备了Iterator接口，例如：Array、Map、Set、String等

let arr = [1,2,3,4];
let it = arr[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

Iterator的应用场景举例：

1.在解构赋值的时候默认调用Iterator接口

let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z)

2.扩展运算符使用等时候也默认调用Iterator接口

let st = 'nodeing'
console.log([...st])

9.2.for...of方法

在ES6中，引入了for...of循环，作为遍历所有数据结构的统一方法，在for...of循环内部也是调用数据结构的Symbol.iterator方法

let st = 'nodeing';

for (let a of st){
    console.log(a)
}

注意：对象是不可迭代的

//对象是不可迭代的
let obj = {
    name: 'xiaoqiang',
    age: 18
};
// obj is not iterable
for (let a of obj){
    console.log(a)
}

视频教程地址：http://edu.nodeing.com/course/50