前言：本博客系列为学习后盾人js教程过程中的记录与产出，如果对你有帮助，欢迎关注，点赞，分享。不足之处也欢迎指正，作者会积极思考与改正。
总述：
| 名称 | 遍历 | 适用 |
|---|---|---|
| for-in | 索引 | 主要建议白能力对象，不介意遍历数组 |
| for-of | 值 | 可用于遍历数组，字符串，映射，集合等，无法遍历对象 |
使用效果：
for-in遍历中得到的是每一项的索引；for-of得到的是每一项的值
//案列一:操作数组
let arr=[‘a‘,‘b‘,‘c‘,‘d‘];
//for-in遍历数组
for(let index in arr){
console.log(index);//遍历下标0,1,2,3
console.log(arr[index]);//遍历数组‘a‘,‘b‘,‘c‘,‘d‘
}
//for-of遍历数组
for(let value of arr){
console.log(value);//遍历数组‘a‘,‘b‘,‘c‘,‘d‘
}
let obj={
key1:"a",
key2:"b"
}
//for-in遍历数组
for(let index in obj){
console.log(index);//遍历下标0,1,2,3
console.log(obj[index]);//遍历数组‘a‘,‘b‘,‘c‘,‘d‘
}
//for-of遍历数组
for(let value of obj){
console.log(value);//报错obj is not iterable
}
//案例二:操作对象for-in可以 for-of不行，本质是迭代器
let obj={
key1:"a",
key2:"b"
}
//for-in遍历数组
for(let index in obj){
console.log(index);//遍历下标0,1,2,3
console.log(obj[index]);//遍历数组‘a‘,‘b‘,‘c‘,‘d‘
}
//for-of遍历数组
for(let value of obj){
console.log(value);//报错obj is not iterable
}
//for-of还可以遍历DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<ul>
<li></li>
<li> </li>
</ul>
</main>
<script>
let lis=document.querySelectorAll("li");//找到都没中的所有li队形打包成数组
for(let li of lis){//遍历所有li对象
li.innerHTML="a";//给li对象加如内容a
}
</script>
</body>
</html>
尾记：
有任何问题，欢迎私聊哟~~~
也可关注公众号“诗与凉风”联系作者哦~~