探讨for...in和for...of在实际应用的差别——javascript

for…in和for…of的基本概念

其中for-of是ES6新增的迭代语法
在MDN上的解释：
for…in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。
for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
由此概念可看出区别：for…in是返回可枚举对象的属性，而for…of是返回可枚举对象的值
另外一点：for…in会继承， 而for…of不会

分别使用for…in和for…of遍历数组和对象等测试

遍历数组

let arrs = [1,2,3,4,5,6,7,8,9]
for (let arr in arrs) {
  console.log(arr)
}
for (let arr of arrs) {
  console.log(arr)
}

output

两种方法遍历数组得到的结果的差异

我们看一下遍历结果的类型

    let arrs = [1,2,3,4,5,6,7,8,9]
    for (let arr in arrs) {
      console.log(arr, typeof arr)
    }
    for (let arr of arrs) {
      console.log(arr, typeof arr)
    }

output

for…in虽然能遍历出数组的每个元素，但是本质上并不是遍历数组的值，而是遍历出数组的属性。

上面介绍for…in的时候提到了它的继承性，而我们的数组是继承自Array对象及Object对象，现在我们对这两个对象添加属性

for…in的继承性

	Object.prototype.objTest = function() {}
    Array.prototype.arrTest = 'array'
    let arrs = [1,2,3]
    for (let arr in arrs) {
      console.log(arr, typeof arr)
    }
    for (let arr of arrs) {
      console.log(arr, typeof arr)
    }

output

可以看到定义在Object和Array的两个属性都被遍历出来了，而且他们的类型都是string
由此可以得出一个结论：
for…in遍历得到的是对象的属性名称

遍历对象

	let objs = {
      name: 'zs',
      age: 22
    }
    for (let obj in objs) {
      console.log(obj)
    }
    for (let obj of objs) {
      console.log(obj)
    }

output

for…of是不能遍历对象的属性的，而for…in可以将对象的属性名（key）遍历出来

同样的，for…in也能将对象继承到的属性遍历出来

	Object.prototype.objTest = function() {}
    let objs = {
      name: 'zs',
      age: 22
    }
    for (let obj in objs) {
      console.log(obj , typeof obj)
    }

output

遍历字符串

for…in和for…of还能像python一样遍历字符串，不同的是，两者遍历得到的结果不一样

	objs = 'abc'
    for (let obj in objs) {
      console.log(obj)
    }
    for (let obj of objs) {
      console.log(obj)
    }

output

for…in遍历得到每个字符在字符串中的索引位置
for…of遍历得到每一个字符

发现：js中字符串可以用索引直接取得字符

	let objs = 'abc'
    console.log(objs[0])
    console.log(objs[1])
    console.log(objs[2])

output

因此，for…in也能达到for…of的效果

    objs = 'abc'
    for (let index in objs) {
      console.log(objs[index])
    }

output

---

参考文章：

https://www.cnblogs.com/hughes5135/p/10411343.html
https://www.digitalocean.com/community/tutorials/for-loops-for-of-loops-and-for-in-loops-in-javascript