循环遍历的几种方法

柔光的暖阳◎ 2022-06-04 06:08 340阅读 0赞

# **1. for循环** #

## 1) Array数组 ##

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

## 2) Object对象 ##

for循环无法遍历Object对象

## 3) NodeList数组 ##

1 2 3

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

或者用Reflect的ownKeys()方法，该方法还能获取到以Symbol为键名的键值,而上述原生的JavaScript方法则无法获取，例如

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

## 3) NodeList数组 ##

1 2 3

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) }

或者用Reflect的ownKeys()方法，该方法还能获取到以Symbol为键名的键值,而上述原生的JavaScript方法则无法获取，例如

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

或者用Object.keys()方法和Object.values()方法遍历，但是该方法无法获取继承的属性和Symbol属性

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

## 3) NodeList数组 ##

1 2 3

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

此外，Set对象具有keys()，values()，entries()方法可以分别获取Set对象的键名，键值和键值对，结合for...of实现遍历

## 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