1. for迴圈

1) Array陣列

for(let i=0,len=arr.length;i<len;i++){
    console.log(arr[i])
}

2) Object物件

for迴圈無法遍歷Object物件

3) NodeList陣列

<span>1</span>
<span>2</span>
<span>3</span>

for(let i=0,len=span.length;i<len;i++){
    console.log(span[i].innerHTML)
}

4) Set物件

for迴圈無法直接遍歷Set物件，可以先用Array.from()方法或者[...]先將Set物件轉換成普通陣列

let set = new Set(['red', 'green', 'blue']);
var arr=Array.from(set)//或者var arr=[...set]
for(let i=0,len=arr.length;i<len;i++){
    console.log(arr[i])
}

5)  Map

此外，Set物件具有keys()，values()，entries()方法可以分別獲取Set物件的鍵名，鍵值和鍵值對，結合for...of實現遍歷

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
var arrr=[...map]
for(let i=0,len=arrr.length;i<len;i++){
    console.log(arrr[i])
}
//["F", "no"]
//["T", "yes"]
 

6) Generator物件

先利用Array.from或者[...]方法將其轉換為常規陣列

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var arr=Array.from(gen())
for(let i=0,len=arr.length;i<len;i++){
    console.log(arr[i])
}

2. forEach

1) Array

arr.forEach((value,key,item)=>{console.log(value)})

2) Object

JavaScript原生的Object物件無法直接使用forEach迴圈遍歷，可以先借用Object物件的方法獲取鍵名陣列

let obj={
    name:'lsh',
    age: 16,
    sex: 'male',
}
Object.getOwnPropertyNames(obj).forEach((key)=>{console.log(obj[key])})
//lsh
//16
//male

let email=Symbol();
obj[email]="[email protected]"
Reflect.ownKeys(obj).forEach((key)=>{console.log(obj[key])})
//lsh
//16
//male
//[email protected]

3) NodeList陣列

<span>1</span>
<span>2</span>
<span>3</span>

span.forEach((value,key,item)=>{console.log(item[key].innerHTML)})
//1
//2
//3

4) Set

let set = new Set(['red', 'green', 'blue']);
set.forEach((value,key,item)=>{console.log(value)})
//red
//green
//blue

5) Map物件

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
map.forEach((value,key,item)=>{console.log(value)})
//no
//yes

6) Generator物件

先利用Array.from或者[...]方法將其轉換為常規陣列

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
Array.from(gen()).forEach((value)=>{console.log(value)})

3. for...in 

適用於遍歷普通物件，無法遍歷Map、Set等物件

1) Array

var arr=[1,2,3]
for(let v in arr){
    console.log(v)
}
for(let v in obj){
    console.log(v)
}

2) Object

for(let v in obj){
    console.log(obj[v])
}

3) NodeList物件

for(let v in Array.from(span)){
    console.log(span[v])
}

4) Generator物件

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
for(let v in Array.from(gen())){
    console.log(v)
}

4. for...of

可以遍歷NodeList、Map、Set、Generator物件

1) Array陣列

let arr=[1,2,3];
for(let v of arr){
    console.log(v)
}
//1
//2
//3

2) 原生的Obejct物件

JavaScript原生的Object物件沒有Iterator 介面，無法使用for...of遍歷器，通過以下方法可以實現用for...of遍歷

let obj={
    name:'lsh',
    age: 16,
    sex: 'male',
}
for(let v of Object.getOwnPropertyNames(obj)){
    console.log(v)
}

let email=Symbol();
obj[email]="[email protected]"
for(let v of Reflect.ownKeys(obj)){
    console.log(obj[v])
}
//lsh
//16
//male
//[email protected]

或者用Object.keys()方法和Object.values()方法遍歷，但是該方法無法獲取繼承的屬性和Symbol屬性

let email=Symbol();
obj[email]="[email protected]"
for(let v of Object.keys(obj)){
    console.log(obj[v])
}
for(let v of Object.values(obj)){
    console.log(v);
}
//lsh
//16
//male
//[email protected]

3) NodeList陣列

<span>1</span>
<span>2</span>
<span>3</span>

let span=document.querySelectorAll('span')
for(let v of span){
    console.log(v.innerHTML)
}
//1
//2
//3

4) Set物件

let set = new Set(['red', 'green', 'blue']);
for(let v of set){
    console.log(v)
}
//red
//green
//blue

5) Map物件

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for(let v of map){
    console.log(v)
}
//["F", "no"]
//["T", "yes"]

此外，Map物件具有keys()，values()，entries()方法可以分別獲取Set物件的鍵名，鍵值和鍵值對，結合for...of實現遍歷

6) Generator物件

只能返回yield的結果，無法返回return的結果

function *foo() {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}

for (let v of foo()) {
  console.log(v);
}
// 1 2 3