这次我终于可以决定用for of还是for in了!

171 阅读1分钟

可能需要以下提示

  • Object.keys(obj) —— 返回一个包含该对象所有的键的数组。
  • Object.values(obj) —— 返回一个包含该对象所有的值的数组。
  • Object.entries(obj) —— 返回一个包含该对象所有 [key, value] 键值对的数组
let user = {
  name: "John",
  age: 30
};
Object.keys(user) = ["name", "age"]
Object.values(user) = ["John", 30]
Object.entries(user) = [ ["name","John"], ["age",30] ]

遍历对象

let obj = { 0:'a', 1:'b', 2:'c' }

                ->1for(const key of Object.keys(obj)){
                |       console.log(key) // 0,1,2
                |       console.log(obj[key]) // a,b,c
                |     }
    ->键(key)->     
    |           ->2for(const key in obj){
    |           |       if(obj.hasOwnProperty(key)){ //忽略继承属性
    |           |          console.log(key) // 0,1,2
    |           |          console.log(obj[key]) // a,b,c
    |           |       }  
    |           |     }
    |          
    |           ->1for(const value of Object.values(obj)){
    |           |       console.log(value) // a,b,c
    |           |     }
对象->值(value)->
    |           |
    |           |
    |           ->2、 obj[key]:利用for infor of的key值获取value
    |          
    |              
    ->键值对(key-value)-> for (const [key, value] of Object.entries(obj)) {
                              console.log(`${key}: ${value}`);
                           }
                           // expected output:
                           // "0: a"
                           // "1: b"
                           // "2: c"

遍历数组

let arr = ['c','b','a']
   
                |  for(const key of Object.keys(arr)){        
    ->键(key)->      console.log(key) // 0,1,2
    |           |     console.log(arr[key]) // c,b,a    
    |           |  }     
    |           |
数组->          
    |           ->1for(const value of arr){
    |           |       console.log(value) // c,b,a
    |           |     }
    ->值(value)->
                |
                |
                ->2、 arr[key]:利用for of的key值获取value
                

小结

  • 不用forEach 遍历数组,因为无法break或者return false中断
  • 不用for in 遍历数组,因为
    • key(索引)为字符串型数字,不能直接进行几何运算
    • 无序遍历
    • 会遍历数组所有的可枚举属性
  • for of还可以迭代迭代字符串、arguments类数组对象、与 break、continue和return 配合使用