如何从数组抽取随机不重复评论并通过DOM渲染到页面展示

功能实现步骤 #

第一步：随机抽取4条有效不重复评论 #

核心逻辑：

• 先过滤出content和by字段非空的有效评论（stars和source有默认值可缺省）
• 对有效评论数组进行洗牌打乱，从根源避免随机值重复问题
• 截取打乱后数组的前4条作为渲染数据源

第二步：DOM渲染逻辑 #

核心逻辑：

• 遍历抽取到的4条评论，自动补全默认字段值
• 拼接评论HTML结构，批量插入到页面容器中

完整代码示例 #

HTML部分 #

在页面需要展示评论的位置加入容器：

<div id="reviews-container" class="reviews-wrapper"></div>

CSS部分（可选，基础展示样式） #

.reviews-wrapper {
  max-width: 1200px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 15px;
}
.review-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
}
.review-stars {
  color: #f59e0b;
  margin-bottom: 10px;
}
.review-content {
  line-height: 1.6;
  color: #374151;
  margin-bottom: 15px;
}
.review-meta {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

JS部分 #

// 你的原始评论数据
var reviews = [
  {
    content: "content of review", 
    by: "name of reviewer or initials",
    stars: 5,
    source: "Google Play",
  },
  {
    content: "content of review",
    by: "name of reviewer or initials",
    stars: 5,
    source: "Google Play",
  },
  // 更多条目省略
];

// 数组洗牌函数（Fisher-Yates算法，保证随机概率均等、无重复抽取）
function shuffleArray(arr) {
  let newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
}

// 1. 过滤有效评论（排除内容、发布人为空的无效条目）
const validReviews = reviews.filter(item => item?.content?.trim() && item?.by?.trim());
// 2. 打乱后取前4条，若有效评论不足4条则自动取全部
const selectedReviews = shuffleArray(validReviews).slice(0, 4);
// 3. 渲染到页面
const container = document.getElementById('reviews-container');
let htmlStr = '';

selectedReviews.forEach(review => {
  // 补全字段默认值
  const stars = review.stars || 5;
  const source = review.source || 'Google Play';
  // 生成星星展示效果
  const starsHtml = '★'.repeat(stars) + '☆'.repeat(5 - stars);
  // 拼接单条评论结构
  htmlStr += `
  <div class="review-item">
    <div class="review-stars">${starsHtml}</div>
    <p class="review-content">${review.content}</p>
    <div class="review-meta">
      <span>by ${review.by}</span>
      <span>来自 ${source}</span>
    </div>
  </div>
  `;
});

container.innerHTML = htmlStr;

注意事项 #

• 所有用户输入字段直接输出文本内容，不会解析HTML，规避XSS安全风险
• 可根据设计需求自行调整CSS样式、修改HTML结构

内容的提问来源于stack exchange，提问作者Bryce Steuer