for...of和for...in的区别

for…of和for…in的区别

1. for…in循环的是key。for…of循环的是value

   let arr = ['a', 123, { a: '1', b: '2' }]
   for (let key in arr) {
     console.log(`${arr[key]}`);
     // a 123 [object Object]
   }
   
   for (let value of arr) {
     console.log(value)
     // a 123 {a: "1", b: "2"}
   }
   

2. 推荐使用for…in循环对象属性,使用for…of遍历数组

   • 不建议使用for in 遍历数组，因为输出的顺序是不固定的

   • for…of 不能循环普通的对象，需要通过和Object.keys()搭配使用

     let student = {
       name: 'cc',
       age: 16,
       locate: {
         country: 'china',
         city: '杭州'
       }
     }
     console.log(Object.keys(student)) // ["name", "age", "locate"]
     for (let key of Object.keys(student)) {
       console.log(`${key}:${student[key]}`)
       // name:cc
       // age:16
       // locate:[object Object]
     }
     

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

   let arr = ['a', 123, { a: '1', b: '2' }]
   arr.name = 'cc'
   console.log(arr)  // ["a", 123, {a: "1", b: "2"}, name: "cc"]
   for (let key in arr) {
   console.log(arr[key]);
   // a 123 {a: "1", b: "2"} cc
   }
   for (let value of arr) {
   console.log(value)
   // a 123 {a: "1", b: "2"}
   

总结:

	for…in	for…of
循环内容	key	value
数据类型	对象	数组
是否会遍历自定义属性	是	否