一、课程名称：前端工程师2022版
二、课程章节：ES6语法扩展-Iterator遍历器与for...of循环
三、课程讲师：Alex
四、课程内容
（一）for...of的基本用法
（1）认识for...of：注意，for...of循环只会遍历出那些done为false时，对应的value值
const arr = [1, 2, 3];
// 使用for of循环
for (const item of arr) { console.log(item); }
（2）与break、continue一起使用
const arr = [1, 2, 3];
for (const item of arr) {
if (item === 2) {
// break;
continue;
}
console.log(item);
}
（3）在for...of中取得数组的索引
1）keys()得到的时索引的可遍历对象，可以遍历出索引值
for (const key of arr.keys()) {
console.log(key);
}
2）values()得到的是值的可遍历对象，可以遍历出值
// 获取索引值，但是这和直接遍历没有什么区别
for (const value of arr.values()) {
console.log(value);
}
for (const item of arr) {
console.log(item);
}
3）entries()得到的是索引+值组成的数组的可遍历对象
// 在一次for循环中同时遍历出索引和值
for (const entries of arr.entries()) {
console.log(entries);
}
// 联系解构赋值，可以直接解构出来
for (const [index,value] of arr.entries()) {
console.log(index,value);
}
（二）认识可遍历
（1）什么是可遍历
只要有Symbol.iterator方法，并且这个方法可以生成可遍历对象，就是可遍历的，只要可遍历，就可以使用for...of循环来统一遍历
（2）原生可遍历的有哪些
数组、字符串、Set、Map、arguments、NodeList
//数组
for(const item of [1,2,3]){
console.log(item);
}
// 字符串
for (const item of "hi") {
console.log(item);
}
//Set
for (const item of new Set([1, 2])) {
console.log(item);
}
//NodeList
for (const elem of document.querySelectorAll("p")) {
console.log(elem);
elem.style.color = "red";
}
（3）非原生可遍历有哪些
1）一般对象
// 一般的对象
const person = { sex: "male", age: 18 };
console.log(person[Symbol.iterator]()); //报错，所以不可以使用for of
// for(const item of person){}
// 想要遍历对象，有两种方法，一种是使用for in循环，另一种是给对象添加iterator方法
// {next()}{value,done}
person[Symbol.iterator] = () => {
let index = 0;
return {
next() {
index++;
if (index === 1) {
return {
value: person.age,
done: false,
};
} else if (index === 2) {
return {
value: person.sex,
done: false,
};
} else {
return {
done: true,
};
}
},
};
};
for (const item of person) {
console.log(item);
}
2）有length和索引属性的对象
obj[Symbol.iterator]=Array.prototype[Symbol.iterator]
五、课程心得
今天学习了for...of用法、可遍历等相关知识，对Iterator的理解进一步加深，昨天学习上的问题得到了解决，继续加油！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
