JS之ES6中迭代器的详解

目录

引言

迭代器

总结

---

引言

在网上看到这样一个面试题

如何让下面的这行代码成立？

var [a,b] = {a:1,b:2}

直接运行以上代码是会报错，报错信息如下

根据以上这个问题来了解一下ES6中的迭代和生成

迭代器

Iterator是 ES6 引入的一种新的数据遍历机制。

1、迭代器是一个统一的接口，使各种数据结构可以被便捷的读取，通过一个键为  Symbol.iterator 的方法来实现。

2、迭代器是用于遍历数据结构元素的下标（指针）。

const arr       = ['bob','dream','google','baidu'];

// 1.使用Symbol.iterator创建一个迭代器
const iterator  = arr[Symbol.iterator]();

//输出创建后的数据
console.log(iterator); // Array Iterator{}

// 2.调用next()方法向下迭代
console.log(iterator.next()); // {value: 'bob', done: false}
console.log(iterator.next()); // {value: 'dream', done: false}
console.log(iterator.next()); // {value: 'google', done: false}
console.log(iterator.next()); // {value: 'baidu', done: false}
// 3.当done为true的时候遍历结束。
console.log(iterator.next());  // {value: undefined, done: true}

可迭代的数据结构Array,String,Map,Set;

注意：如果一个对象要使用迭代的话就需要做以下事

通过实例来看一下

var [a,b] = [1,2]
console.log([a,b])

通过执行以上代码，发现数组中有一个  Symbol.iterator  

那么要使对象可以迭代，是不是只需要给对象也增加一个 Symbol.iterator  就可以了呢？

答案是当然可以的，在ES6里面有一个可迭代协议，只要一个对象有一个属性 Symbol.iterator 且它是一个函数，且返回一个迭代器，那么这个对象即可迭代。

通过以上，我们就不难解决最初提到的面试题，只需要给对象{a:1,b:2}增加一个迭代器即可

下面来看一下代码

// 按照es6的标准 给{a:1,b:2}对象加一个属性Symbol.iterator迭代器
 
Object.prototype[Symbol.iterator] = function(){
  return Object.values(this)[Symbol.iterator](); //调用数组的迭代器 
}

var [a,b] = {a:1,b:2};

console.log([a,b]);//输出 [1,2]

增加完迭代器后，问题就解决了。

总结

ES6中的迭代器（Iterator）是一种接口，为各种不同的数据结构提供了统一的访问机制。其核心作用在于为各种数据结构提供一个统一、简便的访问接口，使得数据结构的成员能够按某种次序排列，并且支持新的遍历命令for...of循环。

迭代器的工作原理主要基于一个指针对象，该对象指向数据结构的起始位置。当第一次调用next方法时，指针会自动指向数据结构的第一个成员。随后，每次调用next方法，指针都会向后移动，直到指向最后一个成员。每次调用next方法都会返回一个包含value和done属性的对象，其中value表示当前成员的值，而done是一个布尔值，用于表示数据结构是否已遍历结束。当遍历结束时，返回的value值为undefined，done值为true。

原生具备Iterator接口的数据结构可以直接使用for...of进行遍历，例如数组、Map、Set等。同时，也可以通过在自定义对象中实现Symbol.iterator方法，来使其支持迭代器的遍历。

总结来说，ES6迭代器为开发者提供了一种统一、灵活的方式来遍历不同的数据结构，使得代码更加简洁和易读。同时，通过自定义迭代器的实现，也可以方便地扩展和定制遍历的行为。