如何移除升序数组最后一个字符串元素末尾的多余逗号

原有业务逻辑 #

现有代码用于合并商品卷数据，按卷号升序排序后查找指定范围内缺失的卷号，原代码如下：

let produtos = [...Produtos, data]
produtos= produtos.sort((a,b) => a.numero_volume - b.numero_volume)
setFiltro('')
var volume = data.volumes

var list = [];

for (var i = 1; i <= volume; i++) {
  const p = produtos.find(p => p.numero_volume == i)
  if(!p) {
    list.push(`${i},`);
  }
  setLista(list) 
}
setProdutos(produtos)

代码运行效果如下：

存在的问题 #

原逻辑在收集缺失卷号时，给每个存入数组的卷号都拼接了逗号，导致数组最后一个元素末尾带有多余逗号；同时setLista写在循环内部，每次遍历都会触发状态更新，存在不必要的性能开销。

修复方案 #

推荐写法（从根源避免多余逗号） #

不需要在push元素时提前拼接逗号，等所有缺失卷号收集完成后，统一调用数组的join方法用逗号拼接，该方法会自动在元素间插入逗号，不会在首尾生成多余符号，同时把状态更新逻辑挪到循环外部：

let produtos = [...Produtos, data]
produtos = produtos.sort((a,b) => a.numero_volume - b.numero_volume)
setFiltro('')
const totalVolume = data.volumes
const missingList = []

for (let i = 1; i <= totalVolume; i++) {
  const target = produtos.find(p => p.numero_volume == i)
  if (!target) {
    missingList.push(String(i))
  }
}
// 循环结束后统一更新状态，统一拼接逗号
setLista(missingList.join(','))
setProdutos(produtos)

兼容原有数组结构的修复方式 #

如果业务要求数组内每个元素必须保留逗号拼接格式，只需要在循环结束后，单独移除最后一个元素末尾的逗号即可，不需要改动循环内的逻辑：

let produtos = [...Produtos, data]
produtos= produtos.sort((a,b) => a.numero_volume - b.numero_volume)
setFiltro('')
var volume = data.volumes
var list = [];

for (var i = 1; i <= volume; i++) {
  const p = produtos.find(p => p.numero_volume == i)
  if(!p) {
    list.push(`${i},`);
  }
}
// 处理最后一项的多余逗号
if (list.length > 0) {
  const lastIdx = list.length - 1
  list[lastIdx] = list[lastIdx].slice(0, -1)
}
setLista(list)
setProdutos(produtos)

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