for...in和for...of

lockloke發表於2021-01-03

講for...of之前應該先講for...in。

for...in是我們一開始學陣列物件遍歷時最常用的方式,但是那樣寫很麻煩,像下面這樣

var arr=[1,3,5,7,9];
for(let i=0;i<arr.length;i++){
    console.log(i);//當前元素下標
    console.log(arr[i]);//當前元素
}

但是,這種寫法略顯麻煩,可以改成下面這種,略微簡單

var arr=[1,3,5,7,9];
for(let i in arr){
    console.log(i);//當前元素下標
    console.log(arr[i]);//當前元素
}

但還是不太好用,因為for...in會將原型鏈上的屬性方法都遍歷出來,這樣會導致很多麻煩,length啥的都不準,比如你在原型鏈上定義過一些屬性或方法,使用for...in的話就會將這些方法一起遍歷出來,

Array.prototype.sss=function(){
	console.log(1)
}
var arr=[1,3,5,7,9];
for(let i in arr){
	console.log(i,arr[i]);//當前元素下標、元素本身
}
			
Object.prototype.s=function(){
	console.log(2)
}
var obj={m:2,ss:66};
for(let i in obj){
	console.log(i,obj[i]);//當前元素下標、元素本身
}

如果不想那些屬性啥的被遍歷出來,可以使用hasOwnProperty()-----(這個用在物件上好點,因為這個是用來判斷物件是否含有該屬性的,而陣列雖然也是物件,但每個元素的索引被視為物件的屬性,所以如果用arr.hasOwnProperty(i)來對陣列進行判斷,實際上是行不通的),在物件上使用如下

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

(除非你本來就是想把這些額外的屬性方法也一起遍歷出來,畢竟有些時候我們就是不知道原型鏈上有啥屬性方法),由於Array也是物件,而它的每個元素的索引被視為物件的屬性,因此,for ... in迴圈可以直接迴圈出Array的索引:

而for...of是iterable型別才能使用的(iterable包括array、set、map,但不包括object),作用類似於for...in,

在用於陣列上時如下:

var arr=[1,3,5,7,9];
for(let item of arr){
    console.log(item);//當前元素
}

但是,for...of在用於陣列遍歷時是無法直接獲取到當前下標的,如果想獲取到當前下標誌,可以通過如下方式

var arr=[1,3,5,7,9];
for(let [i,v] of arr.entries()){
    console.log(i);//當前元素下標
    console.log(v);//當前元素
}

 

相關文章