map结构ES6

遍历器Iterator 与for…of
Iterator遍历器 1.Iterator 的作用？Iterator :遍历器（迭代器），所以他是用来遍历的
2.寻找遍历器Iterator 在数组中
console.log([1, 2]);//在数组的原型上可以找到 Symbol(Symbol.iterator) 方法
在Set中
let set = new Set([1, 2, 3]);
console.log(set);//在set数据集合中的原型上 找到Symbol(Symbol.iterator) 方法
在Map中
let map = new Map([[“name”, “zhangsan”], [“sex”, “male”]]);
console.log(map);//在map的原型对象上 找到Symbol(Symbol.iterator) 方法
在arguments中
function fun1() { console.log(arguments) }
fun1(23, 3, 4);//在arguments中可以找到 Symbol(Symbol.iterator)
在NodeList中
let ps = document.querySelectorAll(“p”);
console.log(ps);//在NodeList的原型对象中可以找到Symbol(Symbol.iterator)
在字符串对象中
let str = new String(“helloworld”);
console.log(str);//在string对象的原型对象中可以找到Symbol(Symbol.iterator)
使用Iterator
const arr = [1, 3];
console.log(arr);//在控制台中打印输出
arrSymbol.iterator;//Symbol.iterator 可遍历对象的生成方法
// Symbol.iterator 可遍历对象的生成方法
// it：可遍历对象 可迭代对象
const it = [1, 3]Symbol.iterator;
console.log(it);//Iterator it上面有一个next()方法
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 3, done: false}
console.log(it.next());//{value: undefined, done: true}
什么是Iterator? 指的是 可遍历的过程
Symbol.iterator(可遍历对象的生成方法) -> it(可遍历对象)->it.next()->it.next()->…(直到done 为true) 的 过程
使用了Iterator的场合
①原生可遍历：数组、String字符串、Set、Map、函数的arguments、NodeList对象
②数据的展开运算符
console.log(…[1, 2, 3]);
console.log(…“helloworld”),
console.log(…new Set([1, 2, 3]))
console.log(…{});//报错，对象中没有Iterator
③数组的解构赋值
为什么要使用Iterator遍历器
在我们之前的学习中可以知道，遍历数组：for/forEach，遍历对象for…in，那么为什么要使用Iterator 遍历器？
Iterator遍历器是一个统一的遍历方式
如何更方便的使用 Iterator
我们知道Iterator的遍历过程，Symbol.iterator(可遍历对象的生成方法) -> it(可遍历对象)->it.next()- >it.next()->…(直到done 为true)
那么其实我们一般不会直接使用Iterator遍历，而是通过 for…of 进行遍历。这里我们用了大量的时间 去学习Iterator是为了解她内部的运行机制。
遍历for…of
认识for…of
const arr = [1, 2, 4];//数组
//通过Symbol.iterator可遍历生成方法，获取到it可遍历对象
const it = arrSymbol.iterator;
//调用可遍历对象it的next方法，可以获取到{value:1,done:false}的对象
let next = it.next();
while (!next.done) {//判断done是否为true
console.log(next.value);//数组的值
next = it.next();
}
上面就是通过iterator遍历数组的方法，可以看到这样子做事比较麻烦的。下面我们通过for…of遍历数组
// 和上面的代码功能等价的
for (const iterator of arr) { console.log(iterator) }
与break、continue 一起使用
for (const item of arr) { if (item === 2) { // break; continue; } console.log(item); }
在for…of中取得数组的索引
const arr = [2, 3, 5];
// keys()得到的是索引的可遍历对象，可以遍历出索引值
for (const key of arr.keys()) { console.log(key);//索引 0 1 2 }
// values() 得到的是值得可遍历对象 和直接遍历效果一样
for (const value of arr.values()) { console.log(value);//值 2 3 5 }
// 和values() 一样的效果
for (const item of arr) { console.log(item);//值 2 3 5 }
// entries() 得到的是索引+值组成的数组的可遍历对象
for (const iterator of arr.entries()) { console.log(iterator);//[0,2] [1,3] [2,5] }
// entries() 得到的是索引+值组成的数组的可遍历对象
for (const [index, value] of arr.entries()) { console.log(index, value); //0 2 //1 3 //2 5}