JS中几种包含for的遍历方式

forEach,map,filter区别

forEach:遍历数组常用(调用数组的每个元素，并将元素传递给回调函数)

let arr = [1,2,3,4,5];
arr.forEach((i)=>{
    console.log(i);//1 2 3 4 5
});

这种循环的问题在于无法中途跳出循环，break和return命令不能奏效. map和filter都返回数组，map返回的与原数组长度相同

map

let arr = ['a','b','c','d'];
let newArr = arr.map((val,key)=>{
    if(val=='c'){
        return val;}
});
console.log(newArr);//[undefined,undefined,'c',undefined];

filter

let arr = ['a','b','c','d'];
let newArr = arr.filter((val,key)=>{
    if(val=='c'){
        return val;
        }
});
console.log(newArr);//['c']

只返回符合条件的结果一个值 every和some返回布尔值

for-in:遍历对象所有的可枚举属性（主要是为了遍历对象而设计的，不适用于遍历数组）功能类似于Object.keys().

let obj = {
    name:'xiaoming',
    age:15
}
for(let item in obj){
    console.log(item);//name age
}

不可枚举的对象：如constructor,数组的length

let arr = [10, 20, 30, 40, 50];
 
for (let item in arr) {
    console.log(item); // '0' '1' '2' '3' '4'
}

数组的键名是数字，但是for-in循环是以字符串作为键名‘0’、‘1’、‘2’等.

for-of:所有实现了[Symbol.iterator]接口的对象都可以被遍历。可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串 for..of获取索引 .entries()返回键值对 .keys()返回键名 .values()返回键值类似数组的对象：如字符串DOM NodeList 对象、arguments对象等

let str = 'hi';
for(let i of str){
    console.log(s);
}//h i

let item = document.querySelectorAll('p');
for(let a of item){
    a.classList.add('test');
}

(function(){
    for(let x of arguments){
        console.log(x);
    }
})('a','b');
//'a'
//'b'

并非所有类似数组的对象都有iterator接口，使用Array.from()将其转化为数组

let ar = {length:2,0:'a',1:'b'};
for(let i of ar){
    console.log(i);//报错
}

for(let i of Array.from(ar)){
    consle.log(i);//'a' 'b'
}

普通对象不能直接使用for-of会报错，因为没有iterator接口,for-in可以直接使用，若非要使用for-of需要使用Object.keys方法将键名生成一个数组，然后遍历这个数组。

for(let key of Object.keys(obj)){
    console.log(key+' '+obj[key]);
}

JS中几种包含for的遍历方式

猜你喜欢