1.循环数组
区别一:for in 和 for of 都可以循环数组,for in 输出的是数组的index下标,而for of 输出的是数组的每一项的值。
const arr = ['a', 'b', 'c', 'd']
// for ... in
for (const key in arr) {
console.log(key) // 输出 0,1,2,3
}
// for ... of
for (const key of arr) {
console.log(key) // 输出 a,b,c,d
}
2.循环对象
区别二:for in 可以遍历对象,for of 不能遍历对象,只能遍历带有iterator(迭代器)接口的,例如Set,Map,String,Array
const object = { name: 'zs', age: 23 }
// for ... in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 zs,23
}
// for ... of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}
3.数组对象
const list = [{ name: 'lx' }, { age: 23 }]
for (const val of list) {
console.log(val) // 输出{ name: 'lx' }, { age: 23 }
for (const key in val) {
console.log(val[key]) // 输出 lx,23
}
}
else:
1.作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性,举个例子,如果你的数组中有一个可枚举的类型a.name,那么循环将额外执行一次,遍历到名为name的索引,甚至数组原型链上的属性都能被访问到,此时如果你不希望得到他们,就应该结在for-in循环的时候添加 hasOwnProperty()方法来过滤掉非自有属性。
2.index索引为字符串型数字,不能直接进行几何运算
3.遍历顺序有可能不是按照实际数组的内部顺序
4.使用for in会遍历数组所有的可枚举属性,包括原型。例如原型方法method和name属性
var a = ["a", "b", "c"];
for(var index in a){
// console.log(a[index]);
console.log(typeof index); //string
}
var b = new Array(1,2,3,4) //创建一个数组
b.name = '小明' //给数组添加一个属性
Array.prototype.age = 12 //给数组的原型也添加一个属性
for(let key in b){
console.log(key)
}
//output
0
1
2
3
name
age
//同样用for of 遍历结果如下
for(let value of b){
console.log(value)
}
//output
1
2
3
4