javascript - 如何动态获取组名称并进行循环javascript

Question

我正在尝试分组，然后动态取消分组，然后使用该组的每个元素创建一个循环。但我看了几个例子，还是无法解决下面的问题。

我使用“tipo”进行分组。

      const list = [
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Tempestade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Tempestade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Chuvas Intensas",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Chuvas Intensas",
        id: "11313"
      }
    ];

    const groups = list.reduce((groups, item) => ({
      ...groups,
      [item.tipo]: [...(groups[item.tipo] || []), item]
    }), {});

    if (typeof groups['Tempestade'] != 'undefined') {
      groups['Tempestade'].reverse();
      for(var i=0; i<groups['Tempestade'].length; i++){
        var splot = groups['Tempestade'][i].alerta.split('.');
        console.log(splot);
      }
    }

如何动态获取组['group1']和其他组并提取到for？

Answer 1

我想我知道你的意思，你可以使用 for...in接下来是 for...of

The for...in statement iterates over all non-Symbol, enumerable properties of an object.

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

这是一个片段

const list = [{
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  }
];

const groups = list.reduce((groups, item) => ({
  ...groups,
  [item.tipo]: [...(groups[item.tipo] || []), item]
}), {});

// This is the loop you were looking for (Dynamically loop over groups)
for(groupName in groups) {
  console.log(`Showing elements in group ${groupName}`)
  for (element of groups[groupName]) {
    console.log (`Element of ${groupName}`, element);
  }
}