for...in根據key遍歷
for...in區別:
遍歷對象時會從原型上繼承屬性,可以用hasOwnProperty()識別出繼承屬性,
遍歷數組會把數組下標看做屬性名,也就輸出結果是數組的下標,且不一定按照數組的索引順序。
輸出結果是字符串
function Person(name){ this.name = name; } Person.prototype.getName = function(){ return this.name; } var child= new Person('lala'); for (let i in child){ console.log(i); } //name //getName for (let i in child){ if(child.hasOwnProperty(i)){ console.log(i); } } //name var aa = ['aa','bb','cc']; for(let i in aa){ console.log(i); } // 0 1 2
for...of根據值遍歷
for...of用來遍歷數據,例如數組中的值,但是也可以遍歷字符串,支持Map和Set對象的遍歷,避免了所有for...in的弊端,與forEach相比可以正確響應break,continue,return語句。
var aa = ['aa','bb','cc']; for(let i of aa){ console.log(i); } // aa bb cc var str='abc'; for(let i of str){ console.log(i); } // a b c var set=new Set(['aa','bb','cc']); for(let i of set){ console.log(i); } //aa bb cc
forEach根據index遍歷
forEach一般只能適用於數組,功能是從頭到尾把數組遍歷一遍,可以有三個參數,后兩個可以不寫
var arr = ['aa','bb']; arr.forEach(function(v,i,a){ console.log(v,i,a);//分別對應:數組元素,元素的索引,數組本身 }); //aa 0 ['aa','bb'] //bb 1 ['aa','bb']
講真基礎還是需要多練習,聽說forEach是for循環的加強版,就想自己去實現下,結果想的有些復雜了還沒做出來,於是百度了下,居然那么簡單。
Array.prototype.eachFor = function(fn){ for(let i=0;i<this.length;i++){ fn(this[i],i,this); } } var aa=[5,6,7]; aa.eachFor(function(v,i){ console.log(v,i); }); //5 0 //6 1 //7 2
map根據index遍歷
和forEach相比,使用方法一樣有三個參數,map只能對元素進行加工處理,產生一個新的數組對象。
var arr=[1,2,3]; arr.map(function(v,i,arr){ return v*2; }); //[2,4,6] filter
filter對原數組進行過濾篩選,生成新的數組,使用和map樣有三個參數。如果對空數組進行篩選,會返回undefined。filter不會改變原數組。
var aa=[1,2,1,2,3]; aa.filter(function(v,i,self){ return self.indexOf(v) == i; }); //[1,2,3]
for
for常規語句遍歷,可循環數字,字符串,數組
for(let i=0;i<5;i++){ console.log(i); } //0 1 2 3 4