Iterator-遍历器（迭代器）

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 something
 
　　return 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);
}