【快速入门系列】简述 for...in 和 for...of 区别

ashe 发布于2019-08-22 17:09 / 2954人阅读

摘要：像和使用内置构造函数所创建的对象都会继承自和的不可枚举属性，例如的方法或的方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性更接近原型链中对象的属性覆盖原型属性。遍历数组时推荐使用，其中为数组每一项的值。

引言

在对数组或对象进行遍历时，我们经常会使用到两种方法：for...in 和 for...of，那么这两种方法之间的区别是什么呢？让我们来研究研究。

一、for...in

首先我们看下MDN对for...in方法的解释：for...in | MDN

for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如 String 的 indexOf()  方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。

首先，我们简单的使用for...in分别对对象和数组进行遍历：

// 遍历对象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item in obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 运行结果
item:a
1
item:b
2
item:c
3

// 遍历数组
let arr = [1, 2, 3];
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 运行结果
item:0
1
item:1
2
item:2
3

我们发现，使用for...in进行遍历时，item值为对象的key，为数组的index。
我们知道，数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同，因此不能保证for...in以某种固定的顺序返回索引，因此，不推荐使用for...in进行数组的遍历。

下面，我们在上面代码的基础上，在arr数组上增加一个自定义属性，再次遍历，查看结果。

arr.name = "arrName";
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 运行结果
item:0
1
item:1
2
item:2
3
item:name
arrName

我们发现，for...in不仅会遍历数组中的元素，还会遍历自定义属性。

二、for...of

说完for...in我们再来看看for...of，我们还是先来看看MDN对其的解释 for...of | MDN

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

同样的，我们还是使用与for...in相同的代码进行测试

// 遍历对象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item of obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 运行结果
for(let item of obj) {
                ^

TypeError: obj is not iterable
...

// 遍历数组
let arr = [1, 2, 3];
for(let item of arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 运行结果
item:1
undefined
item:2
undefined
item:3
undefined

我们可以看出，使用for...of对对象进行遍历时，报了TypeError: obj is not iterable错误，对数组进行遍历时，item直接是数组每一项的值。

我们再为arr增加自定义属性，查看效果。

arr.name = "arrName";
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 运行结果
item:1
undefined
item:2
undefined
item:3
undefined

for...of没有对数组的自定义属性进行遍历。

三、总结

根据以上测试结果并参考了相关资料，我们得出了以下结论：

遍历对象时推荐使用for...in，其中item为对象的key。使用for...of会报错。

遍历数组时推荐使用for...of，其中item为数组每一项的值。使用for...in则不能保证遍历顺序且会遍历出自定义属性。

for...in是ES5特性，for...of是ES6特性，因此需要注意兼容性。

如果要使用for...of遍历普通对象，需要配合Object.keys()一起使用。

结束语

以上内容是我们对for...in和for...of的测试对比，在使用时记住其区别可更快的编写代码和排查错误，若想了解其更深层区别，建议认真阅读MDN相关资料。

服务器托管专线服务 for...of 入门系列课程深度学习入门系列课程 spark入门实战系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94911.html

javaScript中 for...in 和 for...of 的区别

摘要：和的差异解析是标准，是针对的不足而补充的方法。遍历的是数组中元素的值。当使用遍历数组的时候，我们得到的实际上是数组的索引值键值，同时如果数组存在别的属性的话，也会被遍历出来。甚至可以遍历到对象的原型方法和属性一个栗子参考简述中与区别 for...in和for...of使用场景差异一句话：遍历对象的属性时，用for...in。想遍历数组中元素的值的话,用for...of。 for......

alanoddsoff 2019-08-22 18:42 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

muzhuyu 2019-07-01 12:43 评论0 收藏0