Js中for in 和for of的區別

筱筱醬發表於2018-05-03
JS

對陣列的遍歷大家最常用的就是for迴圈，ES5的話也可以使用forEach，ES5具有遍歷陣列功能的還有map、filter、some、every、reduce、reduceRight等，只不過他們的返回結果不一樣。但是使用foreach遍歷陣列的話，使用break不能中斷迴圈，使用return也不能返回到外層函式。

那麼接下來我們一起看一下for in 和for of 的區別吧。

for in

看一個簡單的例子

//for in 應用於陣列
Array.prototype.sayHello = function(){
    console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,10,30,100];
myArray.name='陣列';

for(let index in myArray){
    console.log(index);
}
//輸出結果如下
0,1,2,3,4,name,str,sayHello

//for in  應用於物件中
Object.prototype.sayHello = function(){
    console.log('Hello');
}
Obeject.prototype.str = 'World';
var myObject = {name:'zhangsan',age:100};

for(let index in myObject){
    console.log(index);
}
//輸出結果
name,age,str,sayHello
//首先輸出的是物件的屬性名，再是物件原型中的屬性和方法，
//如果不想讓其輸出原型中的屬性和方法，可以使用hasOwnProperty方法進行過濾
for(let index in myObject){
    if(myObject.hasOwnProperty(index)){
        console.log(index)
    }
}
//輸出結果為
name,age
//你也可以用Object.keys()方法獲取所有的自身可列舉屬性組成的陣列。
Object.keys(myObject)

複製程式碼

可以看出for in 應用於陣列迴圈返回的是陣列的下標和陣列的屬性和原型上的方法和屬性，而for in應用於物件迴圈返回的是物件的屬性名和原型中的方法和屬性。

使用for in 也可以遍歷陣列，但是會存在以下問題：

1.index索引為字串型數字，不能直接進行幾何運算

2.遍歷順序有可能不是按照實際陣列的內部順序

3.使用for in會遍歷陣列所有的可列舉屬性，包括原型。例如上慄的原型方法method和name屬性

for of
Object.prototype.sayHello = function(){
    console.log('Hello');
}
var myObject = {
    name:'zhangsan',
    age:10
}

for(let key of myObject){
    consoloe.log(key);
}
//輸出結果
//typeError

Array.prototype.sayHello = function(){
    console.log("Hello");
}
var myArray = [1,200,3,400,100];
for(let key of myArray){
    console.log(key);
}
//輸出結果
1,200,3,400,100

複製程式碼

for in遍歷的是陣列的索引（即鍵名），而for of遍歷的是陣列元素值。 所以for in更適合遍歷物件，不要使用for in遍歷陣列。

相關文章