前端面试系列-JavaScript-for ... in和for...of

骑猪看日落 2022-11-13 04:08 137阅读 0赞

### 文章目录 ###

*  一、for ... in、for...of区别
 *   *  1.for ... in
     *  2. for...of
     *  3.区别
 *  二、转为ES5代码
 *  三、性能比较

# 一、for … in、for…of区别 #

## 1.for … in ##

for…in 循环一般用于对象的遍历，不适用于遍历数组。

遍历数组的缺点：数组的下标 index 值是数字，for-in遍历的 index值"0",“1”,"2"等是字符串。存在一个转换过程，降低性能

任何对象都继承了Object对象，继承的类的属性是默认不可遍历的，for… in 循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。  
可以用hasOwnProperty() 方法，在循环内部判断一下，某个属性是否为对象自身的属性。

## 2. for…of ##

for…of 循环不仅支持数组，还支持大多数类数组对象，也支持字符串遍历。 for…of 它可以正确响应 break、continue 和 return 语句。

## 3.区别 ##

*  for in 一般常用来遍历对象或json，不适用于遍历数组。
 *  for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
 *  for in循环出的是key，for of循环出的是value
 *  遍历对象时，for in，包括原型链上的属性，需要用hasOwnProperty()判断；for of + Object.keys()得到的是自身可枚举属性

# 二、转为ES5代码 #

ES6代码

let arr = [1,2,3,4]
    
    for(let item of arr){
    	console.log(item)
    }
    
    for(let index in arr){
    	console.log(arr[index])
    }
    
    let obj = {
    	name:"小强",
        age:23
    }
    for(let item of Object.keys(obj)){
    	console.log(obj[item])
    }
    
    for(let index in obj){
    	console.log(obj[index])
    }

转为ES5:

"use strict";
    
    var arr = [1, 2, 3, 4];
    
    for (var _i = 0, _arr = arr; _i < _arr.length; _i++) {
      var item = _arr[_i];
      console.log(item);
    }
    
    for (var index in arr) {
      console.log(arr[index]);
    }
    
    var obj = {
      name: "小强",
      age: 23
    };
    
    for (var _i2 = 0, _Object$keys = Object.keys(obj); _i2 < _Object$keys.length; _i2++) {
      var _item = _Object$keys[_i2];
      console.log(obj[_item]);
    }
    
    for (var _index in obj) {
      console.log(obj[_index]);
    }

可以看到转成ES5代码后， for…of 就是用for实现的。

# 三、性能比较 #

for > for…of > for…in

*  for循环的i是Number类型，开销较小
 *  for…in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到  
    且for…in的key是String类型，有转换过程，开销比较大

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115203524][https_blog.csdn.net_qq_39903567_article_details_115203524]

[https_blog.csdn.net_qq_39903567_article_details_115203524]: https://blog.csdn.net/qq_39903567/article/details/115203524