区分 for...in 和 for...of

Posted 2020-11-30 belongs-to-qinghua

　　我们都知道在 javascript 中 for...in 和 for...of 都可以迭代一个数组，但他们之间也有着很大的区别：

 

区别一：用于迭代器的返回值不同

　　for...in 和 for...of 最明显的区别莫过于他们用于迭代器的返回值不同，for...in 迭代的是对象的键，而 for...of 迭代的是对象的值。我们可以通过下面的例子对二者进行区分：

const array = [3,4,5]

for (let i in array) {
    console.log(i)    //0,1,2
}

for (let i of array) {
    console.log(i)    //3,4,5
}

　　

区别二：功能权限不同

　　另一个区别在于，for...in 可以操作任何对象，提供了查看对象属性的一种方法。但是 for...of 关注迭代对象的值，内置对象Map和Set已经实现了Symbol.iterator 方法，让我们可以访问它们的值：

const fruits = new Set([‘apple‘,‘pear‘,‘mango‘])
fruits[‘peach‘] = ‘Princess Peach! Make a wish!‘

for(let fruit in fruits) {
    console.log(fruit)  //peach
}

for (let fruit of fruits) {
    console.log(fruit) //apple pear mango
}

　　但是这样的特性仅仅在 ES6 及以上才生效。