频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
循环遍历的几种方法讲解(代码实例)
2017-12-07 11:38:04      个评论    来源:michael8512的博客  
收藏   我要投稿

循环遍历的几种方法讲解(代码实例)

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

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[email]="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()方法

点击复制链接 与好友分享!回本站首页
上一篇:HTML文本框录入字母自动大写问题解决方法
下一篇:WEB开发入门知识讲解
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站