ES6参考---for...of方法
一、总结
一句话总结：
for...of方法本质上就是调用对象的iterator接口，用来遍历
1、自定义iterator生成指针对象 代码？
主要是实现iterator的next方法和终值判断
// 自定义iterator生成指针对象 function mockIterator(arr) { let nextIndex = 0; return { next: function () { return nextIndex<arr.length?{value: arr[nextIndex++], done: false}:{value: undefined, done: true} } } }
2、iterator接口机制 工作原理？
-、创建一个指针对象，指向数据结构的起始位置。
-、第一次调用next方法，指针自动指向数据结构的第一个成员
-、接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
-、每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
- 创建一个指针对象，指向数据结构的起始位置。
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
* 当遍历结束的时候返回的value值是undefined，done值为false
3、原生具备iterator接口的数据结构(可用for of遍历)？
Array、arguments、set容器、map容器、String等
1、Array
2、arguments
3、set容器
4、map容器
5、String
。。。
二、for...of方法
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Iterator遍历器</title> 6 </head> 7 <body> 8 <!-- 9 概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制 10 作用： 11 1、为各种数据结构，提供一个统一的、简便的访问接口； 12 2、使得数据结构的成员能够按某种次序排列 13 3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。 14 工作原理： 15 - 创建一个指针对象，指向数据结构的起始位置。 16 - 第一次调用next方法，指针自动指向数据结构的第一个成员 17 - 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员 18 - 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值} 19 * value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。 20 * 当遍历结束的时候返回的value值是undefined，done值为false 21 原生具备iterator接口的数据(可用for of遍历) 22 1、Array 23 2、arguments 24 3、set容器 25 4、map容器 26 5、String 27 。。。 28 --> 29 30 <script type="text/javascript"> 31 window.onload = function () { 32 // 自定义iterator生成指针对象 33 function mockIterator(arr) { 34 let nextIndex = 0; 35 return { 36 next: function () { 37 return nextIndex<arr.length?{value: arr[nextIndex++], done: false}:{value: undefined, done: true} 38 } 39 } 40 } 41 42 let arr = [1,2,3,4,5]; 43 let iteratorObj = mockIterator(arr); 44 console.log(iteratorObj.next()); 45 console.log(iteratorObj.next()); 46 console.log(iteratorObj.next()); 47 48 49 // 使用解构赋值以及...三点运算符时会调用iterator接口 50 let arr1 = [1,2,3,4,5]; 51 let [value1, ...arr2] = arr1; 52 // yield*语句 53 function* generatorObj() { 54 yield '1'; // 可遍历数据，会自动调用iterator函数 55 yield '3'; 56 } 57 let Go = generatorObj(); 58 console.log(Go.next()); 59 console.log(Go.next()); 60 console.log(Go.next()); 61 62 63 // 原生测试 数组 64 let arr3 = [1, 2, 'kobe', true]; 65 for(let i of arr3){ 66 console.log(i); 67 } 68 // 字符串 string 69 let str = 'abcdefg'; 70 for(let item of str){ 71 console.log(item); 72 } 73 74 75 } 76 </script> 77 </body> 78 </html>