for..in和obj[]结合遍历对象,适合有分组时使用

背景

之前在做旅游网的时候碰到obj[]，也就是一个对象使用[]取值的用法，这里简单说下：以obj对象为例

  let obj={
    age:12,
    name:'tom',
    children:[1,2,3]
 }

使用for…in循环,输出了属性名

for(let i in obj){
  console.log(i);    //age,name,children
}

而使用obj[],得

obj["age"]  //12
obj["name"]  //tom
obj["children"]  //[1,2,3]

而当我们使用这两者结合时,就可以遍历对象了

for(let i in obj){
  console.log(obj[i]);    //12,tom,[1,2,3],undefined
}

那么我们遍历对象能干嘛呢？是这样的
比如有一个对象

obj1={
A:[{age},{age2}],
B:[{age3},{age4}]
}
那么通过

for(let i in obj1){
     console.log(obj[i])
}

这样就可以拿到两个数组[{age},{age2}],[{age3},{age4}]了，如果还想拿到每个数组里的每一个对象的值，那么可以使用filter()\forEach()等遍历数组的方法了

for(let i in obj1){
  obj[i].forEach((item) => {console.log(item)})
}

简单来讲，就是1.for…in循环拿到属性名A；2.obj[A],根据拿到的属性名A拿到属性值[{age},{age2}]，3.forEach循环遍历数组[{age},{age2}]

总结

当需要使用分组的数据时可以使用该遍历方法，比如
obj3={
水果:[{苹果},{雪梨}]，
素菜:[{白菜},{大白菜}]
…
}
做成下面这样显示
水果:苹果,雪梨
素菜:白菜，大白菜

代码大概就是

for(let i in obj3){
   console.log(i);
   obj[i].forEach((item) => {
      console.log(item)
  })
}