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