如何隐藏数组中的重复项（不删除）？该需求是否可实现？

当然可以实现，核心思路是保留数组所有元素，但通过DOM样式控制，让指定的重复元素不可见，而非从数组中删除它们。以下是针对你给出的示例数组[1, 2, 3, 3, 3, 3]的具体实现方案：

实现逻辑 #

1. 先统计数组中每个值的出现次数，以及首次、末次出现的索引；
2. 将数组元素逐个渲染到DOM中，给需要隐藏的重复项设置style.visibility = "hidden"。

代码示例（JavaScript + DOM） #

// 目标数组
const arr = [1, 2, 3, 3, 3, 3];
// 获取页面上的渲染容器
const container = document.getElementById('array-container');

// 统计每个值的关键索引信息
const valueStats = {};
arr.forEach((item, index) => {
  if (!valueStats[item]) {
    valueStats[item] = {
      firstIndex: index,
      lastIndex: index,
      total: 1
    };
  } else {
    valueStats[item].lastIndex = index;
    valueStats[item].total++;
  }
});

// 渲染数组并设置隐藏样式
arr.forEach((item, index) => {
  const element = document.createElement('span');
  element.textContent = item;
  // 添加分隔符模拟数组格式
  if (index !== arr.length - 1) element.textContent += ', ';

  // 按你的示例需求：保留每个值的首次和末次实例，中间重复项隐藏
  const { total, firstIndex, lastIndex } = valueStats[item];
  if (total > 1 && index !== firstIndex && index !== lastIndex) {
    element.style.visibility = 'hidden';
  }

  container.appendChild(element);
});

配套HTML结构 #

<div id="array-container"></div>

效果说明 #

运行后页面会显示1, 2, 3, , , 3——中间的三个3仅视觉上隐藏，元素本身仍存在于DOM和数组中，完全符合你描述的需求。

如果需要调整隐藏规则，只需修改判断条件：

• 若要只保留每个值的第一个实例，后续重复项全隐藏：

  if (index !== valueStats[item].firstIndex) {
    element.style.visibility = 'hidden';
  }
  

• 若要只保留每个值的最后一个实例，前面重复项全隐藏：

  if (index !== valueStats[item].lastIndex) {
    element.style.visibility = 'hidden';
  }
  

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