【JS學習】for-in與for-of
阿新 • • 發佈：2021-01-12
前言：本部落格系列為學習後盾人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>
尾記：
有任何問題，歡迎私聊喲~~~
也可關注公眾號“詩與涼風”聯絡作者哦~~