for in,for of, for,forEach,map的區別


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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM