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的区别
- for in循环遍历出的是键名(索引),for of循环遍历出的是值
- for of不能直接循环遍历对象