如何修复删除数组中连续重复<app-builder-placeholder>元素的函数？

我来帮你搞定这个函数！你的需求很明确：只删除连续重复的<app-builder-placeholder></app-builder-placeholder>元素，每组连续重复里只保留第一个，对吧？先说说你原来的函数为什么会出问题：

原函数的问题点 #

• 嵌套循环逻辑混乱：外层i和内层j的对比完全没有针对性，会重复检查很多无关的元素组合
• 数组修改后索引未调整：使用splice(i, 1)删除元素后，数组长度变短，但i继续递增，会跳过下一个本应检查的元素
• 错误的删除条件：只要发现两个占位符就删除i位置的元素，这会把所有占位符都删掉，而不是只删连续重复的

修复方案1：构建新数组（推荐，不修改原数组） #

这种方法更安全，不会破坏原数组，逻辑也清晰易懂：

function deleteDuplicatePlaceholders(components) {
  // 空数组直接返回
  if (!components.length) return [];
  
  const result = [components[0]];
  const placeholder = '<app-builder-placeholder></app-builder-placeholder>';
  
  for (let i = 1; i < components.length; i++) {
    const current = components[i];
    // 只有当前元素是占位符，且结果数组最后一个元素也是占位符时，才跳过当前元素
    if (current === placeholder && result[result.length - 1] === placeholder) {
      continue;
    }
    result.push(current);
  }
  
  return result;
}

逻辑说明：

1. 先把第一个元素加入结果数组，作为初始值
2. 从第二个元素开始遍历原数组
3. 每次检查当前元素是否是占位符，同时对比结果数组的最后一个元素
4. 如果两者都是占位符，说明是连续重复，跳过当前元素；否则就把当前元素加入结果数组

修复方案2：直接修改原数组（倒序遍历） #

如果你需要直接修改原数组，可以用倒序遍历的方式，避免索引混乱：

function deleteDuplicatePlaceholders(components) {
  const placeholder = '<app-builder-placeholder></app-builder-placeholder>';
  
  // 从数组末尾往前遍历
  for (let i = components.length - 1; i > 0; i--) {
    // 检查当前元素和前一个元素是否都是占位符
    if (components[i] === placeholder && components[i-1] === placeholder) {
      components.splice(i, 1);
    }
  }
  
  return components;
}

逻辑说明：

倒序遍历的好处是：删除当前元素时，前面的元素索引不会受到影响（因为我们已经检查过前面的元素了），不会出现跳过元素的问题。

测试示例 #

用你提供的数组测试：

const originalArr = [
  "<app-builder-navbar></app-builder-navbar>",
  "<app-builder-placeholder></app-builder-placeholder>",
  "<app-builder-hero></app-builder-hero>",
  "<app-builder-placeholder></app-builder-placeholder>",
  "<app-builder-placeholder></app-builder-placeholder>",
  "<app-builder-footer></app-builder-footer>"
];

// 使用方案1得到的结果
const processedArr = deleteDuplicatePlaceholders(originalArr);
console.log(processedArr);

输出结果就是你想要的：

[
  "<app-builder-navbar></app-builder-navbar>",
  "<app-builder-placeholder></app-builder-placeholder>",
  "<app-builder-hero></app-builder-hero>",
  "<app-builder-placeholder></app-builder-placeholder>",
  "<app-builder-footer></app-builder-footer>"
]

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