从数组中获取随机值并在 DOM 中发布

Posted 2023-03-05

【中文标题】从数组中获取随机值并在 DOM 中发布

【英文标题】：Get random values from array and post in DOM

【发布时间】：2021-12-24 06:12:29

【问题描述】：

我花了很长时间研究如何从对象和数组中获取随机值，但我似乎无法辨别如何实现这一点。我有这个代码，它将容纳多达一百个不同的评论，并带有相应的凭据。我怎样才能 a) 每次页面刷新时，随机抽取一组包含所有相应数据的四个评论（必须是唯一的） b) 通过 DOM 在 html/CSS 中发布这些评论

这是基本代码：

var reviews = [

 content: "content of review", // no need to have html there even.
 by: "name of reviewer or initials",
 stars: 5, // default, no need to specify to every item
 source: "Google Play",  // default, no need to specify to every item
,

 content: "content of review", // no need to have html there even.
 by: "name of reviewer or initials",
 stars: 5, // default, no need to specify to every item
 source: "Google Play",  // default, no need to specify to every item
,
etc.etc
];

【问题讨论】：

这个回答你的问题***.com/questions/4550505/…

Take N random elements from an array 在 *** 上有几个答案。 “通过 DOM 发布 HTML”的第二个问题取决于你想给他们什么格式。再次重申，您可以在 SO 上找到多种方法。

我已经尝试过 Faizal 的解决方案。 Balastrong 我已经花了几个小时试图为我的确切情况找到正确的解决方案。找到了一些接近但丢失的部分太大而无法完全适合我的情况，而且我没有足够的经验来自己做。

【参考方案1】：

我首先想到的是有一个函数，它返回一个包含 n 个唯一元素的数组（在你的例子中，n = 4）

const randomElementsFromArray = (amountOfElements, array) => 
  const arrayWithSelectedElements = [];
  while (arrayWithSelectedElements.length !== amountOfElements) 
    const randomIndex = Math.floor(Math.random() * array.length);
    const chosenElement = array[randomIndex];
    if (!arrayWithSelectedElements.includes(chosenElement)) 
      arrayWithSelectedElements.push(chosenElement);
    
  

  return arrayWithSelectedElements;
;

它需要你想要选择的元素数量和你想要选择的数组。

一个缺点是循环运行的次数不一致，但它应该可以解决问题。

编辑：射击，我忘了问题还有第二部分。

如果您没有使用任何 JS 框架，例如 React，并且您想在纯 JS 中执行此操作，您将创建另一个函数来循环从 randomElementsFromArray 返回的数组中的元素（或使用 .map 方法返回的数组）并创建元素及其内容，并将它们添加到 DOM。