如何将JS循环提取的多个日期年份合并为去重单数组

• 在循环内部声明的dateOnly每次迭代都会被重新赋值，没有持久化的容器累计存储每轮提取的年份，循环结束后仅能拿到最后一个元素的年份值
• 缺少重复值判断逻辑，即使可以累计存储，也会出现大量重复的年份条目

实现逻辑 #

• 在循环作用域外部初始化一个空存储容器，避免被循环迭代逻辑重置
• 每轮循环提取到年份值后，校验该值是否已存在于容器中
• 不存在的年份值再追加到容器内，从根源避免重复条目
• 循环结束后直接返回该容器转换后的标准数组即可

基础版本实现（兼容所有场景） #

function getDate () {
  // 循环外初始化存储数组，不会被迭代重置
  const yearList = [];
  // 直接通过DOM集合长度定义循环边界，避免total变量未定义的报错
  const total = elements.date.length;
  
  for (var i = 0; i < total; i++) {
    // 先去除文本首尾空字符，跳过无文本内容的元素，避免拆分报错
    const rawText = elements.date[i].innerText.trim();
    if (!rawText) continue;

    const dateSplit = rawText.split('-');
    const dateOnly = dateSplit[0];
    
    // 判断年份是否已存在，不存在再追加到数组
    if (!yearList.includes(dateOnly)) {
      yearList.push(dateOnly);
    }
  }
  // 返回无重复的年份数组
  return yearList;
}

优化版本实现（性能更优） #

利用Set天生自动去重的特性简化判断逻辑，在DOM元素数量较多时性能表现更好：

function getDate () {
  const yearSet = new Set();
  const total = elements.date.length;
  
  for (var i = 0; i < total; i++) {
    const rawText = elements.date[i].innerText.trim();
    if (!rawText) continue;
    // Set.add方法会自动忽略重复值，无需手动判断
    yearSet.add(rawText.split('-')[0]);
  }
  // 将Set转换为标准数组返回
  return Array.from(yearSet);
}

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