JS数组合并需求：将@指令间的HTML标签合并为单个数组项

问题说明 #

我们需要处理一个混合了@开头指令和HTML标签的JavaScript数组，将相邻的所有HTML标签合并为单个数组项，同时保留@指令项的独立性。

示例：

• 原数组：

const store = ["@if str == 'hello'", "<div>", "<h1>hello world</h1>", "</div>", "@else", "<p>Hello</p>"]

• 期望结果：

["@if str == 'hello'", "<div><h1>hello world</h1></div>", "@else", "<p>Hello</p>"]

解决方案 #

使用Array.reduce()方法遍历数组，避免直接操作索引导致的错乱问题：

const store = ["@if str == 'hello'", "<div>", "<h1>hello world</h1>", "</div>", "@else", "<p>Hello</p>"];

const mergedStore = store.reduce((acc, current) => {
  // 识别@开头的指令项，直接推入结果数组
  if (current.startsWith('@')) {
    acc.push(current);
  } else {
    const lastItem = acc[acc.length - 1];
    // 若结果数组最后一项不是指令，就合并当前HTML到最后一项
    if (lastItem && !lastItem.startsWith('@')) {
      acc[acc.length - 1] = lastItem + current;
    } else {
      // 否则直接添加当前HTML项
      acc.push(current);
    }
  }
  return acc;
}, []);

console.log(mergedStore);
// 输出：["@if str == 'hello'", "<div><h1>hello world</h1></div>", "@else", "<p>Hello</p>"]

方法说明 #

• 用reduce遍历数组，全程操作累加器数组，不会修改原数组，避免了直接操作索引（比如i+1）时因数组长度变化导致的索引偏移问题
• 通过startsWith('@')判断是否为指令项，逻辑清晰
• 对于HTML项，动态判断是否需要合并到上一个非指令项，确保所有相邻HTML都被合并成单个字符串

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