JavaScript渲染箭头分隔的数组元素时末尾多余箭头如何解决

我在使用箭头作为分隔符展示数组元素时，当前渲染效果如下：

ABC--->DES--->FDD--->BGR--->

目前功能整体可正常运行，但链路最末尾的箭头没有实际指向意义，不符合展示需求，需要移除这个多余的末尾箭头。

当前使用的实现代码如下：

let network = ['ABC', 'DES', 'FDD', 'BGR'];

for (i = 0; i < network.length; i++) {
  temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span><bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>";
  network[i] = temp;
}

console.log(network.join());

出现末尾多余箭头的核心原因是，现有逻辑给每一个数组元素的后方都拼接了箭头标签，最后一个元素后面没有后续内容，跟着的箭头就成了无意义的尾部元素。另外原代码中join()方法未传入参数，默认会用逗号作为数组元素的连接符，会导致渲染结果里元素之间多出逗号，也需要修正。

你可以任选以下一种方式修改：

• 方案1：循环时增加位置判断，仅非最后一个元素拼接箭头

let network = ['ABC', 'DES', 'FDD', 'BGR'];

for (let i = 0; i < network.length; i++) {
  // 先拼接元素本身的样式标签
  let temp = "<span style='border:3px dotted #399bff;'>" + network[i] + "</span>";
  // 只有当前元素不是最后一个时，才拼接后方的箭头
  if (i !== network.length - 1) {
    temp += "<bold style='color:#d77300;'> <i class='fa fa-long-arrow-right'></i></bold>";
  }
  network[i] = temp;
}

// join传入空字符串，避免默认逗号分隔的问题
console.log(network.join(''));

• 方案2：直接用join方法把箭头作为元素分隔符，写法更简洁
  这种方式天然只会在元素和元素之间插入箭头，不会在首尾产生多余内容，是更推荐的写法：

let network = ['ABC', 'DES', 'FDD', 'BGR'];
// 先给所有元素套上对应的样式标签
const formattedItemList = network.map(item => `<span style='border:3px dotted #399bff;'>${item}</span>`);
// 把箭头标签作为连接符拼接所有元素
const finalContent = formattedItemList.join("<bold style='color:#d77300;'> <i class='fa fa-long-arrow-right'></i></bold>");

console.log(finalContent);

两种方案最终渲染效果一致，都为ABC--->DES--->FDD--->BGR，不存在末尾多余的箭头。

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