for in/ for of 最本质的区别

👉官方解释

for in跟for of都是用来迭代的，但是我一直疑惑的是他俩的区别是什么，于是去查了官方文档。

文档上大概就是说for in以任意顺序迭代对象的可枚举属性，而for of遍历可迭代对象定义要迭代的数据。

我的理解

我从三个方面来说他俩的区别。

1.适用的目标不一样

• for in 适用于可枚举数据，比如对象、数据、字符串

什么是可枚举？：在属性里有enumerable:true则叫可枚举，可以通过Object.getOwnPropertyDescriptors()查看。

比如，下边这个代码：

let obj = {
  oname: 111,
  oage: 222
};
console.log(Object.getOwnPropertyDescriptors(obj));
// 每个对象里都有enumerable: true

• for of 适用于可迭代数据，例如Array、String、Map、Set、TypedArray、函数的arguments对象、NodeList对象。

什么是可迭代？：ES6里，具有Symbol.iterator属性，它对应的值是一个函数，调用这个函数可以得到一个对象，每次调用对象的next方法能得到目标的每一项，只要符合这个特点就是可迭代的。

比如，下边这个代码：

let arr = [1, 2, 3, 4, 5];
let a = arr[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

2.遍历的范围不一样

• for in 原型上的可枚举的属性也能被遍历到

• for of 一般只能遍历自身的(具体和迭代器的内部实现有关)

一样的，可以通过以下代码来看

Array.prototype.a = 1;  // 原型上创了个属性a
let arr = [7];
for (let k in arr) {
	console.log(arr[k]);  // 7  1，原型可枚举的属性也遍历到了
}

for(let value of arr) {
	console.log(value);     // 7
}

3.得到的结果不一样

• for in 得到的是key(并且不保证顺序)；
• for of 一般得到的是value(具体和迭代器的内部实现有关)。

一样的，上代码：

let arr = [7];
for (let k in arr) {
	console.log(k);    // 0，数组下标
}

for (let v of arr) {
	console.log(v);    // 7，数组元素
}

以上就是总结的所有区别了。