for of的用法

for of 是ES6新增的语法，下面是一些适用场景

例1，数组内为字符串

var arr = ['张三','李四','hhh'];
for(item of arr){console.log(item)}

image.png

例2，数组里面为对象

var arr = [
{name:'张三',age:'13'},
{name:'李四',age:'14'},
{name:'hhh',age:'13'}
]
for (item of arr){
console.log(item.name+'----'+item.age)
}

image.png

二、与 for in 的区别

区别①：for of无法循环遍历对象

var obj = {name:'张三',age:123}
for(key in obj){
console.log(key,obj[key])
}
console.log('------------')
for(item of obj){
console.log(item)
}

image.png

区别②：遍历输出结果不同

var arr =  ['张三','李四','hhh'];
for(item in arr){
console.log(item)
}
console.log('---------')
for (item of arr){
console.log(item)
}

image.png

注意：for in循环遍历的是数组的键值(索引key)，而for of循环遍历的是数组的值（value）。
区别③：for in 会遍历自定义属性，for of不会

var arr =['张三','李四','hhh','嘿嘿嘿']
arr.name = '呵呵呵'
for(key in arr){
console.log(key+':'+arr[key])
}
console.log('-----')
for(item of arr){
console.log()
}

image.png

tips：可以看出，像数组种添加的属性通过 for of是没有遍历出来的，而for in 是可以的