如何随机映射一个数组而不重复，并且还包含重复数组中的一项？

Question

我有一个 JSON 文件，其中包含我正在尝试映射的数据。

 const randomCategories = []

  for (let i = 0; i < 10; i++) {
    const randomIndex = Math.floor(Math.random() * categoryData.length)
    const randomCategory = categoryData[randomIndex]
    console.log(randomCategory)
    randomCategories.push(randomCategory)
  }

我只想要

categoryData

数组中的 10 个项目，没有任何重复项。我无法进行任何删除重复项或不包含它们的工作。

还有第二个数组：

  const colors = [
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(139,0,0)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(0,0,139)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(184,134,11)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(0,100,0)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(0,139,139)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(139,0,139)"
    },
    {
      "gradient-start": "rgba(0,0,0,0)",
      "gredient-end": "rgb(233,140,0)"
    }
  ]

颜色不需要随机，按照它的顺序就可以了。

从那里，我将

randomCategories

中的项目映射到数据组件网格中

 <div className="grid grid-rows-1 grid-flow-col w-[2360px] h-[233px] max-h-[233px] gap-x-3">
      {randomCategories.map((item) => (
        <CategoryCard key={item?.id} name={item?.name} image={item?.image} />
      ))}

    </div>

我的想法是，我将从

categoryData

生成一个由 10 个随机、独特的项目组成的数组，并在 10 个

CategoryCard

内显示这 10 个项目。每个

CategoryCard

都应具有来自颜色数组的颜色，且顺序相同。因此，如果它是红色、绿色、蓝色、黄色等，一旦我到达颜色数组的末尾，它就会再次重复；红色、绿色、蓝色、黄色等。我不确定如何在 .map 函数中包含这些颜色，或者如何让该数组重复？

附图是我想要实现的目标：

Answer 1

使用

Array#splice

获取随机类别：

    const copy = categoryData.slice();
    const randomCategories = Array.from({length:10}, (_, i) => copy.splice(Math.random() * copy.length | 0);

比使用类别索引来选择颜色：

<div className="grid grid-rows-1 grid-flow-col w-[2360px] h-[233px] max-h-[233px] gap-x-3">
      {randomCategories.map((item, i) => (
        // use color[i] to pick a color and insert into the card's style
        <CategoryCard key={item?.id} name={item?.name} image={item?.image} />
      ))}

    </div>