透过 for in 和 for of 的区别，你看到了什么

Posted 2023-04-07 前端技术栈

简介

经常看到有人问 for in 和 for of 的区别，基本网上去搜几篇文章也都能窥探一二， 但是当我真正使用下来，发现里面其实还是有很多问题，比如：

• 为什么有了 for 循环，还会有 for in 和 for of ？
• 为什么 for in 和 for of 都能遍历数组？
• 为什么 for of 不能遍历对象

当我尝试去把这些问题一一解开的时候，发现事情并不是那么简单。下面进入正题。

for in 和 for of 基本介绍

要了解 for in 和 for of，我们需要先看看 for in 和 for of 的历史，for in 在 js 第一个版本就实现了，和 for 循环是一起出现的； 而 for of 的出现是在 js 大更新的 ES6 时期。 需要说明的是早期 js 还没有现在这么复杂，对象和数组已经能完全满足我们的开发，所以早期将 for 循环用于遍历数组，而 for in 用于遍历对象。 各司其职，就已经足够了。 而 for of 是在 ES6 在新增的，与 for of 同时出现的还有 Map、 Set 这些新的数据存储结构， 已有的 for 循环显然满足不了各种新结构的遍历功能，而 for of 的出现弥补了新的数据结构的遍历功能缺失。

for in 的基本使用

当我们拥有一个对象的时候，我们有时候需要知道这个对象有哪些属性，或者统计对象的属性个数的时候就可以使用 for in。

// for in 遍历一个对象
const obj =  a: 'string', b: 1, c: false 
for (const key in obj) 
  console.log(key, obj[key])

// 结果如下：
// a string
// b 1
// c false
复制代码

for of 的基本使用

// for of 遍历一个 Map
const map = new Map([['a', 'string'], ['b', 1], ['c', false]])

for (const [key, value] of map) 
  console.log(key, value)

// 结果如下：
// a string
// b 1
// c false
复制代码

为什么 for in 能够遍历数组？

前面我们提到了 for in 是用来遍历对象的，那为什么 for in 也能遍历数组呢？ 这里其实就不得不提一嘴了，js 的数组结构其实不是真正的数组结构， 这个其实不难发现，你打开任何一个介绍数据结构的书籍里面都会提到，数组是一个连续的存储空间。 所以数组的长度一定是固定的，而且必须存储统一类型的数据。而 js 的数组其实是基于对象封装的， 所以你可以理解为在 js 里，数组就是一个实现了数组方法的对象。所以 for in 能遍历数组就一点也不奇怪了。

为什么 for of 不能遍历对象

在开头就讲到了，ES6 新增了新的数据结构，比如 Map，而且考虑到 js 的火热，那么很有可能还会有更多的数据结构出现， 早期只有对象和数组，for 循环和 for in 也不是那么难理解，但是考虑到后续的拓展性，我们需要一种新的迭代方法， 它最好能够支持所有数据结构的遍历。听起来有点困难，但其实这是一个很简单的事情，设计模式里面就提到了我们的迭代器模式， 迭代器模式的核心思想就是旨在不暴露数据结构的情况下能够遍历集合中的所有元素。 只不过由于迭代器模式是在是太重要了，所以你可能都注意不到它。大家在看 for of 的使用介绍中， 都会看到这么一句话，for of 只能用来遍历可迭代对象。这句话就说明了 for of 遍历的其实不是我们的数据结构，而是数据结构提供的迭代器。 那么 js 中哪些数据结构提供了迭代器呢？根据 MDN 的数据， 已知的有Array，Map，Set，String，TypedArray，arguments 等，就是不包含对象。

给对象实现个迭代器

刚刚说了 for of 遍历的是数据结构提供的迭代器，既然对象没有，那我们尝试实现一个看看：

// 给对象添加迭代器
Object.prototype[Symbol.iterator] = function() 
  const values = Object.values(this)
  let index = 0
  return 
    next() 
      if (index < values.length) 
        return 
          value: values[index++],
          done: false
        
      
      return 
        value: undefined,
        done: true
      
    
  


const obj =  a: 'string', b: 1, c: false 
// 测试一下
for (const val of obj) 
  console.log(val)

// string
// 1
// false

// 完美运行！
复制代码

结束

快乐的时间总是短暂，这片文章到这里就结束了。但是以后再有人问你 for in 和 for of 的区别，我可不允许你不知道了啊！

 大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

Js中for in 和for of的区别

参考技术A 对数组的遍历大家最常用的就是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遍历数组。