迭代对象的关联数组

Question

我有此对象表：

var gridRegions = {
  seattle:         { label: "SEA", lats: [49.00, 44.50], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] },
  great_falls:     { label: "GTF", lats: [49.00, 44.50], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] },
  billings:        { label: "BIL", lats: [49.00, 44.50], lons: [109.00, 101.00], numGrids: 576, gridLabels: [] },
  twin_cities:     { label: "MSP", lats: [49.00, 44.50], lons: [101.00,  93.00], numGrids: 576, gridLabels: [] },
  green_bay:       { label: "GRB", lats: [48.25, 44.00], lons: [ 93.00,  85.00], numGrids: 544, gridLabels: [] }, 
  lake_huron:      { label: "LHN", lats: [48.00, 44.00], lons: [ 85.00,  77.00], numGrids: 512, gridLabels: [] },
  montreal:        { label: "MON", lats: [48.00, 44.00], lons: [ 77.00,  69.00], numGrids: 512, gridLabels: [] },
  halifax:         { label: "HFX", lats: [48.00, 44.00], lons: [ 69.00,  61.00], numGrids: 512, gridLabels: [] },
  klamath_falls:   { label: "LMT", lats: [44.50, 40.00], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] },
  salt_lake_city:  { label: "SLC", lats: [44.50, 40.00], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] },
  cheyenne:        { label: "LMT", lats: [44.50, 40.00], lons: [109.00, 101.00], numGrids: 576, gridLabels: [] },
  omaha:           { label: "OMA", lats: [44.50, 40.00], lons: [101.00,  93.00], numGrids: 576, gridLabels: [] },
  chicago:         { label: "ORD", lats: [44.00, 40.00], lons: [ 93.00,  85.00], numGrids: 512, gridLabels: [] },
  detroit:         { label: "DET", lats: [44.00, 40.00], lons: [ 85.00,  77.00], numGrids: 512, gridLabels: [] },
  new_york:        { label: "NYC", lats: [44.00, 40.00], lons: [ 77.00,  69.00], numGrids: 512, gridLabels: [] },
  san_francisco:   { label: "SFO", lats: [40.00, 36.00], lons: [125.00, 118.00], numGrids: 448, gridLabels: [] },
  las_vegas:       { label: "LAS", lats: [40.00, 35.75], lons: [118.00, 111.00], numGrids: 476, gridLabels: [] },
  denver:          { label: "DEN", lats: [40.00, 35.75], lons: [111.00, 104.00], numGrids: 476, gridLabels: [] },
  wichita:         { label: "ICT", lats: [40.00, 36.00], lons: [104.00,  97.00], numGrids: 448, gridLabels: [] },
  kansas_city:     { label: "MKC", lats: [40.00, 36.00], lons: [ 97.00,  90.00], numGrids: 448, gridLabels: [] },
  st_louis:        { label: "STL", lats: [40.00, 36.00], lons: [ 91.00,  84.00], numGrids: 448, gridLabels: [] },
  cincinnati:      { label: "LUK", lats: [40.00, 36.00], lons: [ 85.00,  78.00], numGrids: 448, gridLabels: [] },
  washington:      { label: "DCA", lats: [40.00, 36.00], lons: [ 79.00,  72.00], numGrids: 448, gridLabels: [] },
  los_angeles:     { label: "LAX", lats: [36.00, 32.00], lons: [121.50, 115.00], numGrids: 416, gridLabels: [] },
  phoenix:         { label: "PHX", lats: [35.75, 31.25], lons: [116.00, 109.00], numGrids: 504, gridLabels: [] },
  albuquerque:     { label: "ABQ", lats: [36.00, 32.00], lons: [109.00, 102.00], numGrids: 448, gridLabels: [] },
  dallas_ft_worth: { label: "DFW", lats: [36.00, 32.00], lons: [102.00,  95.00], numGrids: 448, gridLabels: [] },
  memphis:         { label: "MEM", lats: [36.00, 32.00], lons: [ 95.00,  88.00], numGrids: 448, gridLabels: [] },
  atlanta:         { label: "ATL", lats: [36.00, 32.00], lons: [ 88.00,  81.00], numGrids: 448, gridLabels: [] },
  charlotte:       { label: "CLT", lats: [36.00, 32.00], lons: [ 81.00,  75.00], numGrids: 384, gridLabels: [] },
  el_paso:         { label: "ELP", lats: [32.00, 28.00], lons: [109.00, 103.00], numGrids: 384, gridLabels: [] },
  san_antonio:     { label: "SAT", lats: [32.00, 28.00], lons: [103.00,  97.00], numGrids: 384, gridLabels: [] },
  houston:         { label: "HOU", lats: [32.00, 28.00], lons: [ 97.00,  91.00], numGrids: 384, gridLabels: [] },
  new_orleans:     { label: "MSY", lats: [32.00, 28.00], lons: [ 91.00,  85.00], numGrids: 384, gridLabels: [] },
  jacksonville:    { label: "JAX", lats: [32.00, 28.00], lons: [ 85.00,  79.00], numGrids: 384, gridLabels: [] },
  brownsville:     { label: "BRO", lats: [28.00, 24.00], lons: [103.00,  97.00], numGrids: 384, gridLabels: [] },
  miami:           { label: "MIA", lats: [28.00, 24.00], lons: [ 83.00,  77.00], numGrids: 384, gridLabels: [] }
};  

在主要用法中，用户通过区域名称选择感兴趣的区域，并且我能够通过gridRegions ['name']。val访问该区域的对象内容。

我在启动时要做的是遍历整个列表，并根据该条目的numGrids值将html动态添加到空数组gridLabels中。 我尝试了各种组合

Object.keys(gridRegions).forEach((region, label) =>  {
  console.log('grid region: ', region );
  console.log('Object.entries ', Object.entries(region));
});
Object.entries(gridRegions).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
Object.forEach((region) => {
  console.log(region.label);
  console.log(region[label]);
  console.log(region['label']);
})

但是我无法摆脱只能访问区域名称的麻烦。 其他所有内容均未定义。 我想做的是

gridRegions.forEach((region) => {
  for (i = 0; i < region.numGrids; i++)
    gridLabels[i] = region.label + i.pad(3);
}

这里有秘密吗？

谢谢

Answer 1

forEach的参数是数组元素（在本例中为键）和数组索引。 如果要获取键引用的对象， 则在使用forEach时 ，必须首先使用[]进行访问：

Object.keys(gridRegions).forEach((region) => {
  const obj = gridRegions[region];
  console.log(obj.label);

或者，您可以使用Object.entries开始，它立即遍历对象的属性和属性值：

 const gridRegions = { seattle: { label: "SEA", lats: [49.00, 44.50], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] }, great_falls: { label: "GTF", lats: [49.00, 44.50], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] }, }; Object.entries(gridRegions).forEach(([key, obj]) => { console.log(`${key} : ${JSON.stringify(obj)}`); });