循环遍历的几种方法

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

或者用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数组

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

或者用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数组

<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

此外，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()方法