Javascript 了解如何在此函数中使用reduce代替map和join

我有一个函数，它用给定的元素名获取html表单上的所有复选框。我对reduce函数可以替代.map和.join部分有一个模糊的理解，所以我一直在寻找一个正确的方向，如何实现它，以及我是否可以采取任何其他步骤来优化此函数

  function getCheckedValuesOf(elmName){
    return [...document.getElementsByName(elmName)].filter(box=>box.checked==true).map(box=>box.value).join(", ")
  }

---

你能试试这个吗？让我知道它是否有效

function getCheckedValuesOf(elmName) {
    return [...document.getElementsByName(elmName)].reduce((a, b) => b.checked && b.value && (a.length>0 ? `${a}, ${b.value}`: `${a} ${b.value}`) || a, "");
}

像这样的

函数getCheckedValuesOf（elmName）{ return[…document.getElementsByName（elmName）] .reduce（（str，box）=>{ 如果（box.checked==true）{ str+=box.value+'，' } 返回str； }, ''); } document.querySelector（'button'）。onclick=（）=>{ log（getCheckedValuesOf（'input'）） }

单击

函数getCheckedValuesOf（elmName）{ return[…document.getElementsByName（elmName）] //acc是上一次迭代返回的值 //curr是当前迭代的元素 .减少（（会计科目，当前）=>{ //在未经检查的情况下什么也不做 如果（当前选中）{ //仅当acc不为空时添加a，以防止无效启动， acc+=（acc！==“”？“，”：“”）+当前值 } //始终返回acc，否则下一次迭代将有acc==未定义 返回acc； //reduce的第二个参数是acc的初始值 //如果未设置，则默认为数组的第一个元素 //迭代从第二个元素开始 }, '') } document.getElementById（“log”）.onclick=（）=>console.log（getCheckedValuesOf（“name”）） console.log（getCheckedValuesOf（“name”））

i1
i2
i3
i4
i5
i6
日志

您只能使用reduce进行操作。根据@akshaybande的答案进行修改，以修复错误（如引导“，”等）

函数getCheckedValuesOf（elmName）{ return[…document.getElementsByName（elmName）].reduce（（acc，cur）=>{ if（当前选中值和当前值）{ 返回acc.length>=1？`${acc}，${cur.value}`:`${cur.value}` } 返回acc； }, ""); } document.getElementById（“log”）.onclick=（）=>console.log（getCheckedValuesOf（“name”）） console.log（getCheckedValuesOf（“name”））

1
2.
3.
4.
5.
6.
log

末尾的附加逗号可能是个问题，否则返回值都很好，

，[object HTMLInputElement]，[object HTMLInputElement]，[object HTMLInputElement]，[object HTMLInputElement]

当选中3个元素时，

，i1，i3，i5

您有一个额外的“开始时，但至少您有值：D”。如果需要，您可以从中复制代码段，只需替换函数即可definition@jonatjano我使用index属性来消除

，

：）index属性是一个陷阱，如果选择第二个元素而不是第一个元素，则返回逗号问题，我也遇到了问题：你可以用

a.length>=1来做，看看我的答案，或者像@jonatjano用
a！==“”