Symbol.iterator（可遍历对象的生成方法）

-> it（可遍历对象）

-> it.next() -> it.next()

->…-> 直到done为true

const it = [1, 2][Symbol.iterator]();console.log(it.next());//{value: 1, done: false}console.log(it.next());//{value: 2, done: false}console.log(it.next());//{value: undefined, done: true}console.log(it.next());//{value: undefined, done: true}

为统一遍历方式

数组遍历：for循环、forEach()

对象遍历： for in循环

用法

不直接使用Iterator遍历

而是用for…of

只要可遍历，即可用for…of循环统一遍历

使用场合

原生可遍历

包括：

数组、字符串、类数组（arguments、Nodelist）、Set、Map等

for …of

展开运算符

底层使用了Symbol.iterator方法

也解释了对象不能直接使用展开运算符，要在{}中展开

因为一般对象无Symbol.iterator方法

错误：console.log(…{});

解构

底层使用了Symbol.iterator方法

可遍历

有Symbol.iterator方法，且该方法可生成可遍历的对象

原生可遍历

包括：数组、字符串、类数组（arguments、Nodelist）、Set、Map等

for (const item of [1, 2, 3]) {console.log(item);}for (const item of 'hello') {console.log(item);}for (const item of document.querySelectorAll('p')) {console.log(item);}for (const item of new Set([1, 2, 3])) {console.log(item);}

非原生可遍历

一般对象

const person = {sex: 'male',age: 18};person[Symbol.iterator] = () => {let index = 0;return {next() {index++;if (index === 1) {return {value: person.sex,done: false};} else if (index === 2) {return {value: person.age,done: false};} else {return {done: true};}}};};for (const item of person)console.log(item);

有length和索引的对象

const obj = {0: 'alex',1: 'male',length: 2};// 数组原型的Symbol.iterator方法赋值给obj[Symbol.iterator]obj[Symbol.iterator] = Array.prototype[Symbol.iterator];for (const item of obj) {console.log(item);}

手动写遍历函数

obj[Symbol.iterator] = () => {let index = 0;return {next() {let value, done;if (index < obj.length) {value = obj[index];done = false;} else {value = undefined;done = true;}index++;return {value,done,};},};};

附加：遍历方法总结

for

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

for(j = 0,len=arr.length; j < len; j++) {}

foreach

遍历数组中的每一项，无返回值

对原数组没有影响，不支持IE

arr.forEach((item,index,array)=>{//执行代码})

参数：value数组中的当前项, index当前项的索引, array原始数组；

参数可为匿名函数，数组有几项函数回调几次

map

有返回值

return的内容：相当于把原数组克隆一份，改变其中对应项；原数组并未发生变化

arr.map(function(value,index,array){//do somethingreturn XXX})

var ary = [12,23,24,42,1]; var res = ary.map(function (item,index,ary ) {return item*10; }) console.log(res);//-->[120,230,240,420,10]; console.log(ary);//-->[12,23,24,42,1]；

for…of

for (var value of myArray) {console.log(value);}

如果觉得《Iterator-遍历器（迭代器）》对你有帮助，请点赞、收藏，并留下你的观点哦！