背景

之前在做旅遊網的時候碰到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)
  })
}