javascript 中 for in 和 for of 的区别

for…in

for (variable in object) {…}

for…in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。

for…in 只遍历可枚举属性。即遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）
for…in 循环以任意序迭代一个对象的属性，所以当迭代访问顺序很重要的数组时，尽量不要用 for…in

for…of

for (variable of iterable) {…}

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

代码示例

let str = 'hello'
let arr = ['1', '2', '3']
let obj = {
    a: 'aa',
    b: 'bb',
    c: 'cc'
}
String.prototype.toWho = 'world'
Array.prototype.hello = 'world'
Object.prototype.sayHi = 'hi'

console.log('---for...in遍历字符串---')
for(let key in str) {
    console.log(key)  // 0, 1, 2, 3, 4, toWho, sayHi
}
console.log('---for...in遍历数组---')
for(let key in arr) {
	// key都为string类型
    console.log(key)  // 0, 1, 2, hello, sayHi
}
console.log('---for...in遍历对象---')
for(let key in obj) {
    console.log(key)  // a, b, c, sayHi
}
console.log('---for...of遍历字符串---')
for(let item of str) {
    console.log(item)  // h, e, l, l, o
}
console.log('---for...of遍历数组---')
for(let item of arr) {
    console.log(item)  // 1, 2, 3
}
console.log('---for...of遍历对象---')
for(let item of obj) {
    console.log(item)  // Uncaught TypeError: obj is not iterable
}

总结

1. for…in 遍历的是属性，for…of 遍历的是属性的值
2. for…in 遍历原型链定义的属性，for…of 不遍历原型链
3. for…in 遍历对象的可枚举属性，for…of 遍历可迭代对象定义要迭代的数据
4. for…in 不能保证将以任何特定的顺序返回索引，for…of 保证有序性
5. for…in 不能关闭迭代器， for…of 可用break等关闭迭代器