js for、foreach、for in、for of 的区别

在开发中，我们经常会对数组或者对象进行遍历，常用的有for、foreach、for in、for of 等方法，那么今天我们来讨论下这些方法的用法；
1.for循环：
for循环经常用在数组中，用法也很简单

for(let i=0,len=array.length;i<len;++i){
    
    
  console.log(array[i])
}

这样便可遍历数组的中的每一项，可通过break或者return来结束循环；
为什么不能遍历对象呢？很明显的一条，对象没有length这个属性。

2.foreach循环：

array.foreach((item,index)=>{
    
    
	console.log(item,index)
)}

写法相对for来说，较简洁，但是它跟for最大的区别就是，它不能用break或者return跳出循环；如果你一定要跳出循环，你得用到 try…catch…

try{
    
    
array.foreach((item,index)=>{
    
    
	if(some===item){
    
    
	  throw error
	}
)}
}catch(error){
    
    

}

3.for in 通常用在对对象的遍历

const obj={
    
    a:1,b:2}
for(let key in obj){
    
    
console.log(key ,obj[key])  //a ,1   b ,2
}

当然除了遍历对象自身的属性，还可以遍历对象原型上的属性，例如：

const obj={
    
    a:1,b:2}
obj.prototype.c=3;
for(let key in obj){
    
    
	console.log(key ,obj[key])  //a,1   b,2  c,3
}

但是如果我们用这个对数组进行遍历呢？

const array=[1,2,3,4]
for(let key in array){
    
    
	console.log(key ,array[key])  //0,1 1,2 2,3 3,4
}

数组本质上也是对象，所以数组也有原型，假设我们在数组上的原型也添加属性，例如：

const array=[1,2,3,4];
array.prototype.addPrototype=5;
for(let key in array){
    
    
	console.log(key ,array[key])  //0,1 1,2 2,3 3,4  addPrototype,5
}

4.for of 当数组添加了原型方法或者属性时，我们不想遍历原型上的方法，那么ES6提供了这样的一种方法，主要是弥补for in的缺陷；

const array=[1,2,3,4];
array.prototype.addPrototype=5;
for(let key of array){
    
    
	console.log(key ,array[key])  //0,1 1,2 2,3 3,4
}

但是for of 不能直接用来遍历对象，否则会报“obj is not iterable” ,如果我们想要用这个来遍历对象的话，得用到Object.keys()的方法

const obj={
    
    a:1,b:2}
for(let key of Object.keys(obj)){
    
    
    console.log(key)
}

总结：
1.功能最强大的是 for in，，既可以遍历数组也可以遍历对象；
2.除了foreach不能用break或者return跳出循环外，其他的都可以；
3.for in通常是用来遍历对象，其他的都是遍历数组

js for、foreach、for in、for of 的区别

猜你喜欢