JS实现数组元素按名称分类（去除#符号，生成TextNode分组）

我来帮你搞定这个需求！咱们先理清楚要做的核心事情，再一步步写出能满足要求的代码。

需求明确 #

给定初始数组：

var a = ['#name1#','#name2#','#name3#','#name1#','#name2#']

需要完成这几件事：

1. 去掉每个元素首尾的#符号，以此作为分类的键名
2. 把原带#的元素创建为TextNode实例
3. 将相同键名对应的TextNode归入同一个数组，最终返回结构为{name1: [textNode, textNode], name2: [textNode, textNode], name3: [textNode]}的对象

正确实现的classify函数 #

下面是可以完美达成需求的代码：

function classify(arr) {
  // 初始化空对象存储最终结果
  const result = {};
  
  arr.forEach(item => {
    // 精准移除字符串首尾的#，得到分类键名
    const key = item.replace(/^#|#$/g, '');
    // 用原带#的字符串创建TextNode
    const textNode = document.createTextNode(item);
    
    // 如果当前键不存在，先初始化空数组
    if (!result[key]) {
      result[key] = [];
    }
    // 将TextNode推入对应分类的数组
    result[key].push(textNode);
  });
  
  return result;
}

// 测试调用
var a = ['#name1#','#name2#','#name3#','#name1#','#name2#'];
const classifiedResult = classify(a);
console.log(classifiedResult);

代码细节解释 #

• 结果对象初始化：result用来承载最终的分类结构，一开始是空对象
• 遍历处理每个元素：
  • 用正则/^#|#$/g匹配并移除字符串开头和结尾的#，这种写法能确保只删首尾的#，不会误删中间可能存在的#（当然你的场景里没有，但这样更严谨）
  • 调用document.createTextNode(item)时，一定要用原元素字符串，这样TextNode的内容才是#name1#这类带#的文本，符合你的需求
  • 检查当前键是否已在result中，不存在就先创建空数组，避免直接push时报错，然后把创建好的TextNode推进对应数组
• 返回结果：最终得到的对象完全匹配你期望的结构

常见错误排查 #

如果之前的函数没能得到正确结果，大概率是这几个问题：

• 替换#的方式不对：比如用replace('#', '')只能替换第一个#，没法同时处理首尾的
• 创建TextNode时用了处理后的字符串：比如用name1而不是#name1#，导致TextNode内容不符合要求
• 没有初始化数组就直接push：比如没写if (!result[key]) {result[key] = []}，导致push时抛出Cannot read property 'push' of undefined错误

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