快捷導(dǎo)航

通過實例解析JavaScript for in及for of區(qū)別

更新時間：2020年06月15日 11:03:23 作者：ssaylo

這篇文章主要介紹了通過實例解析JavaScript for in及for of區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

對數(shù)組的遍歷大家最常用的就是for循環(huán)，ES5的話也可以使用forEach，ES5具有遍歷數(shù)組功能的還有map、filter、some、every、reduce、reduceRight等，只不過他們的返回結(jié)果不一樣。但是使用foreach遍歷數(shù)組的話，使用break不能中斷循環(huán)，使用return也不能返回到外層函數(shù)。

那么接下來我們一起看一下for in 和for of 的區(qū)別吧。

for in

看一個簡單的例子

//for in 應(yīng)用于數(shù)組
Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,10,30,100];
myArray.name='數(shù)組';
 
for(let index in myArray){
  console.log(index);
}
//輸出結(jié)果如下
0,1,2,3,4,name,str,sayHello
 
//for in 應(yīng)用于對象中
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);
}
//輸出結(jié)果
name,age,str,sayHello
//首先輸出的是對象的屬性名，再是對象原型中的屬性和方法，
//如果不想讓其輸出原型中的屬性和方法，可以使用hasOwnProperty方法進行過濾
for(let index in myObject){
  if(myObject.hasOwnProperty(index)){
    console.log(index)
  }
}
//輸出結(jié)果為
name,age
//你也可以用Object.keys()方法獲取所有的自身可枚舉屬性組成的數(shù)組。
Object.keys(myObject)

可以看出for in 應(yīng)用于數(shù)組循環(huán)返回的是數(shù)組的下標和數(shù)組的屬性和原型上的方法和屬性，而for in應(yīng)用于對象循環(huán)返回的是對象的屬性名和原型中的方法和屬性。

使用for in 也可以遍歷數(shù)組，但是會存在以下問題：

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

2.遍歷順序有可能不是按照實際數(shù)組的內(nèi)部順序

3.使用for in會遍歷數(shù)組所有的可枚舉屬性，包括原型。例如上栗的原型方法method和name屬性

Object.prototype.sayHello = function(){
  console.log('Hello');
}
var myObject = {
  name:'zhangsan',
  age:10
}
 
for(let key of myObject){
  consoloe.log(key);
}
//輸出結(jié)果
//typeError
 
Array.prototype.sayHello = function(){
  console.log("Hello");
}
var myArray = [1,200,3,400,100];
for(let key of myArray){
  console.log(key);
}
//輸出結(jié)果
1,200,3,400,100

for in遍歷的是數(shù)組的索引（即鍵名），而for of遍歷的是數(shù)組元素值。所以for in更適合遍歷對象，不要使用for in遍歷數(shù)組。JavaScript for in 和 for of 的區(qū)別

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: