基于两个关联已排序数组同步生成对应class的span标签方案咨询

思路说明 #

两个数组已经完成升序排序，直接使用双指针法遍历即可，时间复杂度为O(n+m)，不需要额外合并排序，性能最优。
规则适配逻辑：

• 数值更小的元素优先输出
• 数值相同时优先输出class为main的span

代码实现 #

生成HTML字符串版本 #

const mains = [1, 5, 6, 8 , 12];
const secondaries = [1, 6, 12];

let i = 0, j = 0;
const spanList = [];

while (i < mains.length || j < secondaries.length) {
  if (i < mains.length && (j >= secondaries.length || mains[i] <= secondaries[j])) {
    // 数值相等时先加main，再加secondary
    if (j < secondaries.length && mains[i] === secondaries[j]) {
      spanList.push(`<span class="main"> ${mains[i]} </span>`);
      spanList.push(`<span class="secondary"> ${secondaries[j]} </span>`);
      i++;
      j++;
    } else {
      // main当前值更小，仅添加main的span
      spanList.push(`<span class="main"> ${mains[i]} </span>`);
      i++;
    }
  } else {
    // secondary当前值更小，添加secondary的span
    spanList.push(`<span class="secondary"> ${secondaries[j]} </span>`);
    j++;
  }
}

// 拼接为完整div的HTML字符串
const divHtml = `<div>${spanList.join('\n')}</div>`;
// 可直接用于渲染
console.log(divHtml);

直接生成DOM元素版本 #

如果需要直接插入页面DOM中，可以用如下实现：

const mains = [1, 5, 6, 8 , 12];
const secondaries = [1, 6, 12];

const container = document.createElement('div');
let i = 0, j = 0;

while (i < mains.length || j < secondaries.length) {
  if (i < mains.length && (j >= secondaries.length || mains[i] <= secondaries[j])) {
    if (j < secondaries.length && mains[i] === secondaries[j]) {
      const mainSpan = document.createElement('span');
      mainSpan.className = 'main';
      mainSpan.textContent = ` ${mains[i]} `;
      container.appendChild(mainSpan);
      
      const secSpan = document.createElement('span');
      secSpan.className = 'secondary';
      secSpan.textContent = ` ${secondaries[j]} `;
      container.appendChild(secSpan);
      i++;
      j++;
    } else {
      const mainSpan = document.createElement('span');
      mainSpan.className = 'main';
      mainSpan.textContent = ` ${mains[i]} `;
      container.appendChild(mainSpan);
      i++;
    }
  } else {
    const secSpan = document.createElement('span');
    secSpan.className = 'secondary';
    secSpan.textContent = ` ${secondaries[j]} `;
    container.appendChild(secSpan);
    j++;
  }
}

// 插入到页面指定位置，示例为插入body
document.body.appendChild(container);

输出验证 #

运行上述代码生成的span顺序和你给出的预期结果完全一致。

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