javascript - 迭代对象的关联数组

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);
}

这里面有什么 secret 吗？

谢谢

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)}`);
});