for...in 与 for..of记录

学习笔记

1. 使用: 推荐在循环对象属性的时候,使用for...in;在遍历数组的时候的时候使用for...of。

2. 循环结果:for...in循环出的是key;for...of循环出的是value

3. 注意: for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

4. 缺点: for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

例如:
let arr = ['a',123,{a:'1',b:'2'}]

for(let index in arr){

    console.log(`${arr[index]}`); // 'a' '123' [object Object]

}

for(var value of arr){

    console.log(value); // a 123 {a: "1", b: "2"}

}

看上去只是写法不同,为什么说for...of修复了for...in的缺陷和不足呢?

例如:arr.name = 'mm' ; // ["a", 123, {a: "1", b: "2"}, name: "mm"]

for(let index in arr){

   console.log(`${arr[index]}`);// 'a' '123' [object Object] 'mm'

}

for(var value of arr){

    console.log(value); // a 123 {a: "1", b: "2"}

}

显而易见,for in 遍历出了name

所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for...of循环不会循环对象的key,只会循环出数组的value,因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

例如:

let obj = {age: 18,name: 'mm'}

for(let value of obj){

console.log(value) //Uncaught TypeError: obj is not iterable

}

for(let value in obj){

console.log(value) //age name

}

如果想用for...of来遍历普通对象的属性,与Object.keys()搭配使用,先获取对象的所有key的数组,然后遍历:

for(var key of Object.keys(obj)){  //使用Object.keys()方法获取对象key的数组

console.log(key+": "+obj[key]); // age: 18 name: mm

}

你可能感兴趣的:(for...in 与 for..of记录)