for in和for of的区别对比

for in和for of的区别对比

for in使用

for in用于循环遍历对象来获取键名（索引）

//循环遍历出字符串的键名（索引）
var str = 'abc'
for(var n in str) {
    console.log(n) //0 1 2
}

//循环遍历出数组的键名（索引）
var ary = ['a', 'b', 'c']
for(var i in ary) {
    console.log(i) //0 1 2
}

//循环遍历出对象的键名
var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
}
for(var j in obj) {
    console.log(j) //0 1 2
}

for of使用

for of用于循环遍历Array、String、Map、Set等拥有迭代器（iterator）的集合来获取值，但是不能遍历对象，因为Object没有iterator，不可以迭代

//循环遍历出字符串的值
var str = 'abc'
for(var n of str) {
    console.log(n) //a b c
}

//循环遍历出数组的值
var ary = ['a', 'b', 'c']
for(var i of ary) {
    console.log(i) //a b c
}

//循环遍历出Map的值
var map = new Map([[0, 'a'], [1, 'b'], [2, 'c']])
for(var h of map) {
    console.log(h) //[0, 'a'] [1, 'b'] [2, 'c']
}
for(var [key, value] of map) {
    console.log(value) //a b c
}

//循环遍历出Set的值
var set = new Set(['a', 'b', 'c', 'c'])
for(var s of set) {
    console.log(s) //a b c
}

//循环遍历出对象的值时，报错：obj不是可迭代对象
var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
}
for(var j of obj) {
    console.log(j) //TypeError: obj is not iterable
}

如果要在Object上使用for of来获取值，可以使用内置的Object.values()方法，Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，便可以使用for of循环遍历这个数组来获取每一个值

var obj = {
    0: 'a',
    1: 'b',
    2: 'c'
}
//使用Object.values()获取所有值的数组，便可以循环遍历出对象的值
for(var j of Object.values(obj)) {
    console.log(j) //a b c
}

如果要在Object上使用for of，可以使用Symbol.iterator 方法去实现一个自定义迭代器，你必须确定自定义的迭代器方法返回一个迭代器对象，即它必须有一个next()

var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    [Symbol.iterator]() {
        var self = this
		var index = -1
		var key = Object.keys(self)
		return {
			next:function(){
				index++
				return {
					value: self[key[index]],
					done: index+1 > key.length
				}
			}
		}
    }
}
//加上Symbol.iterator方法，便可以循环遍历出对象的值
for(var j of obj) {
    console.log(j) //a b c
}

for in和for of的区别

1. for in循环遍历出的是键名（索引），for of循环遍历出的是值
2. for of不能直接循环遍历对象