2

Estou querendo gerar 4 valores aleatórios de uma array. Já tentei usar o Math.random, mas fica em um loop infinito...

import React, { useState, useEffect } from "react";
import api from "../../services/api";

export default function Popular() {
  const [AllServices, setService] = useState([]);

  useEffect(() => {
    api.get("/").then((response) => {
      setService(response.data);
    });
  }, []);
  
    return (
      <div className="cards">
        {AllServices.slice(0, 4).map(service => (
          <div className="card" key={service.id}>
            <img src={service.imageUrl} alt={service.title} />
            <p className="title">{service.title}</p>
            <div className="info">
              <i className="material-icons">grade</i>
              <span className="rating">{service.rating}</span> &middot; {" "}
              <span className="category">{service.category}</span>
            </div>
          </div>
        ))}
      </div>
    );
}
9
  • @Danizavtz Não entendi, poderia me explicar melhor? Commented 1/08/2020 às 3:52
  • Gostaria de saber o intervalo do sorteio dos número, são numero aleatórios de zero a dez?
    – Danizavtz
    Commented 1/08/2020 às 4:08
  • @Danizavtz Ah, sim. De 0 a 8. Commented 1/08/2020 às 4:10
  • Onde queres usar esses valores aleatórios? em vez de .slice(0, 4) para encurtar a array? ou queres ter uma array com numeros aleatórios dentro? e quantos? e de 0 a 8?
    – Sergio
    Commented 1/08/2020 às 4:29
  • @Sergio Em vez do .slice(), quero puxar 4 valores aleatórios do array. Seria de 0 até o tamanho do array, no caso 8. Commented 1/08/2020 às 4:32

2 Respostas 2

3

Podes fazer isso assim (notas nos comentários do código):

const getRandom = (arr, nr) => arr
  .slice() // criar uma cópia para não mudar a array inicial
  .sort(() => 0.5 - Math.random()) // misturar
  .slice(0, nr) // retirar N elementos da nova array misturada

const teste = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(getRandom(teste, 4));
console.log(getRandom(teste, 4));
console.log(getRandom(teste, 4));

No teu código React poderia ficar assim:

import React, { useState, useEffect } from "react";
import api from "../../services/api";

const getRandom = (arr, nr) => arr
  .slice() // criar uma cópia para não mudar a array inicial
  .sort(() => 0.5 - Math.random()) // misturar
  .slice(0, nr) // retirar N elementos da nova array misturada

export default function Popular() {
  const [AllServices, setService] = useState([]);

  useEffect(() => {
    api.get("/").then((response) => {
      setService(response.data);
    });
  }, []);
  
  
  
  return (
    <div className="cards">
      {getRandom(AllServices, 4).map(service => (
        <div className="card" key={service.id}>
          <img src={service.imageUrl} alt={service.title} />
          <p className="title">{service.title}</p>
          <div className="info">
            <i className="material-icons">grade</i>
            <span className="rating">{service.rating}</span> &middot; {" "}
            <span className="category">{service.category}</span>
          </div>
        </div>
      ))}
    </div>
  );
}
3

A resposta aceita funciona, mas possui dois pequenos problemas. O primeiro, e maior, é que produz k-permutações com probabilidades não uniformes. Testando essa função várias vezes, fica claro que o resultado é viciado. Frequentemente, os números obtidos são próximos entre si. Se você realmente quer uma k-permutação uniforme dentre todas as possíveis, então é preciso usar outro algoritmo.

O outro problema (menor) é a performance, tanto em espaço de memória quanto em tempo de execução. O método sort é tipicamente executado em tempo quadrático O(n²), e isso se manifesta quando o array original é muito grande (com mais de centenas de milhares de elementos). Ele também copia o array original desnecessariamente, como veremos.

A solução para ambos problemas é usar uma versão adaptada do algoritmo de Fisher–Yates. Fisher–Yates serve, a princípio, para embaralhar uma sequência de N números de maneira uniforme, sempre contando que Math.random também é uniforme no intervalo [0, 1).

Dessa forma, temos a implementação a seguir:

const algoritmoFisher = (array, number) => {
  const copy = array.slice();
  const { length } = array;

  for (let i = length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = copy[i];
    copy[i] = copy[j];
    copy[j] = temp;
  }

  return copy.slice(0, number);
};

const algoritmoFisherAdaptado = (array, number) => {
  const shuffle = new Array(number);
  const { length } = array;

  shuffle[0] = array[0];

  for (let i = 1; i < number; i++) {
    const j = Math.floor(Math.random() * (i + 1));
    shuffle[i] = shuffle[j];
    shuffle[j] = array[i];
  }
  for (let i = number; i < length; i++) {
    const j = Math.floor(Math.random() * (i + 1));
    if (j <= number - 1) {
      shuffle[j] = array[i];
    }
  }

  return shuffle;
};

Pode-se testar o desempenho e observar a falta de uniformidade do algoritmo ingênuo no demo que fiz no CodeSandbox.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .