循环遍历的几种方法讲解(代码实例)
1. for 循环
1) Array 数组
for(let i=0,len=arr.length;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
Java Script 原生的 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() 方法
来源: https://www.2cto.com/kf/201712/703623.html