使用纯JS将data属性内空白分隔的标签拆分为数组独立元素

问题根源 #

原有代码出错的核心原因是遍历数组的同时通过splice、push修改数组长度，导致索引错位，无法正确遍历所有元素。你可以在标签收集阶段就完成多标签拆分，省去后续修改数组的麻烦，逻辑更精简。

最优实现方案 #

const notes = document.querySelectorAll('.note');
const tags = [];

// 收集标签时直接拆分多标签、过滤空标签
notes.forEach(note => {
  const tagStr = note.dataset.tags;
  if (!tagStr) return
  // 按空格拆分多标签，逐个加入数组
  tagStr.split(' ').forEach(tag => tags.push(tag))
})

// 统一去重，Set 实现比 filter + indexOf 性能更高、代码更简洁
const uniqueTags = [...new Set(tags)]

最终得到的uniqueTags就是你需要的、所有标签独立存在且无重复的数组。

兼容原有逻辑的修改方案 #

如果你不想调整前面的代码逻辑，也可以通过新建数组存储拆分结果的方式，避免遍历原数组时修改结构导致的问题：

// 你原有过滤完undefined和粗去重的代码不变
const notes = document.querySelectorAll('.note');
let tags = [];
notes.forEach(note => tags.push(note.dataset.tags));
tags = tags.filter((value,index,array) => array.indexOf(value) == index);
tags = tags.filter(tag => tag !== undefined);

// 新增部分：新建数组处理拆分，避免修改原遍历数组
const processedTags = []
tags.forEach(tagStr => {
  processedTags.push(...tagStr.split(' '))
})
// 二次去重得到最终结果
const finalTags = [...new Set(processedTags)]

内容的提问来源于stack exchange，提问作者Worried in Denver