ES6迭代器Iterator

迭代器

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

1.Iterator的作用：

• 为各种数据结构，提供一个统一的、简便的访问接口；
• 使得数据结构的成员能够按某种次序排列
• ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

2.原生具备iterator接口的数据(可用for of遍历)|可迭代对象

• Array
• set容器
• map容器
• String
• 函数的 arguments 对象
• NodeList 对象

function fun() {
for (let i of arguments) {
console.log(i) // 1 4 5
}
}
fun(1, 4, 5)

let str = 'abcd';
for(let item of str){
console.log(item); // a b c d
}

let arr3 = [1, 2, 'kobe', true];
for(let i of arr3){
console.log(i); // 1 2 kobe true
}

3.迭代器的工作原理

• 创建一个指针对象，指向数据结构的起始位置。
• return函数next形成闭包，开辟独立的空间，接下来不断调用next方法，指针会一直往后移动
• 判断当前指针位置，每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
  • value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
  • 当遍历结束的时候返回的value值是undefined，done值为true

4.手写一个迭代器

function myIterator(arr) {
let nextIndex = 0
return {
next: function() {
return nextIndex < arr.length
? { value: arr[nextIndex++], done: false }
: { value: undefined, value: true }
}
}
}
let arr = [1, 4, 'ads']// 准备一个数据
let iteratorObj = myIterator(arr)//返回一个对象
console.log(iteratorObj.next()) // 所有的迭代器对象都拥有next()方法，会返回一个结果对象
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())

5.注意点

1 .for of循环不支持遍历普通对象

var obj = { a: 2, b: 3 }
for (let i of obj) {
console.log(i) // Uncaught TypeError: obj is not iterable
}

2. 当使用扩展运算符（...）或者对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法

let arr1 = [1,3]
let arr2 = [2,3,4,5]
arr2 = [1,...arr2,6]
console.log(arr2) // [1, 2, 3, 4, 5, 6]

同样如果对一个普通对象进行解构，则会报错。

因为普通对象不是可迭代对象。

//字符串 var str='12345';

var [a,b]=str;

console.log(a,b); // 1 2

判断对象是否可迭代

可迭代对象的规则必须在对象上部署Symbol.iterator属性，那么我们基本上就可以通过此属来判断对象是否为可迭代对象，然后就可以知道是否能使用 for of 取值了。