循环遍历的几种方法讲解（代码实例）

循环遍历的几种方法讲解（代码实例）

1. for循环

1) Array数组

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

}

2) Object对象

for循环无法遍历Object对象

3) NodeList数组

1
2
3

for(let i=0,len=span.length;i

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

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

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="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

3. for...in

适用于遍历普通对象，无法遍历NodeList、Map、Set等对象

var arr=[1,2,3]
for(let v in arr){
    console.log(v)
}
for(let v in obj){
    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="123@qq.com"
for(let v of Reflect.ownKeys(obj)){
    console.log(obj[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

想要返回所有结果，需要用到next()方法