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

简单来说就是它们两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value）

复制 1
 2var obj = {a:1, b:2, c:3}
 3    
 4for (let key in obj) {
 5  console.log(key)
 6}
 7
 8
 9
10const array1 = ['a', 'b', 'c']
11 
12for (const val of array1) {
13  console.log(val)
14}
15

先说说 for in

for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题，

比如：

index索引为字符串型数字，不能直接进行几何运算

复制 1var arr = [1,2,3]
 2    
 3for (let index in arr) {
 4  let res = index + 1
 5  console.log(res)
 6}
 7

遍历顺序有可能不是按照实际数组的内部顺序

使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性

复制 1var arr = [1,2,3]
 2Array.prototype.a = 123
 3    
 4for (let index in arr) {
 5  let res = arr[index]
 6  console.log(res)
 7}
 8
 9
10for(let index in arr) {
11    if(arr.hasOwnProperty(index)){
12        let res = arr[index]
13  		console.log(res)
14    }
15}
16

再来说说ES6 中的 for of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

复制 1var arr = [1,2,3]
 2arr.a = 123
 3Array.prototype.a = 123
 4    
 5for (let value of arr) {
 6  console.log(value)
 7}
 8

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys()方法

复制 1var myObject={
 2　　a:1,
 3　　b:2,
 4　　c:3
 5}
 6for (var key of Object.keys(myObject)) {
 7  console.log(key + ": " + myObject[key]);
 8}
 9

小结

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

for in总是得到对象的key或数组、字符串的下标

for of总是得到对象的value或数组、字符串的值

四、结束语

如果觉得这篇文章对你有帮助，可以伸出你的小手，为这篇文章点个赞

我是前端路上一位新晋的萌新，怀着学习的态度，怀着认识各位同伴的心态，把自己的知识分享出来，除了让自己对知识认知更加巩固，也希望大家能够通过我写的文章学到一点微薄的知识，如果知识内容有误，可以在评论区或者下面公众号告诉我，我会立刻更改

最后，我也创建了一个 【前端收割机】的公众号，希望大家可以关注一波，里面的文章都是掉头发之作