理解如何在这个函数中使用 reduce 代替 map 和 join

Question

我有以下函数可以获取我的 html 表单上所有选中的具有给定元素名称的复选框。我对 reduce 函数可以替换 .map 和 .join 部分有一个松散的理解，所以我正在寻找一个正确的方向来了解如何实现它，以及我是否可以采取任何其他步骤来优化这个功能？

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

Answer 1

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

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

Answer 2

是这样的吗？

        function getCheckedValuesOf(elmName) {
            return [...document.getElementsByName(elmName)]
                .reduce((str, box) => {
                    if (box.checked == true) {
                        str += box.value +', '
                    }
                    return str;
                }, '');
        }

        document.querySelector('button').onclick = () => {
            console.log(getCheckedValuesOf('input'))
        }

    <input type="checkbox" checked name="input" value="1">
    <input type="checkbox" name="input" value="2">
    <input type="checkbox" name="input" value="3">
    <input type="checkbox" checked name="input" value="4">
    <input type="checkbox" name="input" value="5">
    <button>click</button>

Answer 3

function getCheckedValuesOf(elmName) {
  return [...document.getElementsByName(elmName)]
    // acc is value returned by previous iteration
    // curr is the current iterated element
    .reduce((acc, curr) => {
      // do nothing on unchecked
      if (curr.checked) {
        // add a , only if acc is not empty, to prevent useless starting ,
        acc += (acc !== "" ? ", " : "") + curr.value
      }
      
      // always return acc, or next iteration will have acc === undefined
      return acc;
      
    // second argument of reduce is the initial value of acc
    // if not set then it default to the first element of the array
    // and the iteration starts on the second element
    }, '')
}

document.getElementById("log").onclick = () => console.log(getCheckedValuesOf("name"))
console.log(getCheckedValuesOf("name"))

<input type="checkbox" name="name" checked="false" value="i1"/>i1
<input type="checkbox" name="name" value="i2"/>i2
<input type="checkbox" name="name" checked="false" value="i3"/>i3
<input type="checkbox" name="name" value="i4"/>i4
<input type="checkbox" name="name" checked="false" value="i5"/>i5
<input type="checkbox" name="name" value="i6"/>i6

<button id="log">log</button>

Answer 4

您只能使用 reduce 来完成。修改自@akshaybande 的答案以修复错误（如前导“、”等）

function getCheckedValuesOf(elmName) {
    return [...document.getElementsByName(elmName)].reduce((acc, cur) => {
      if (cur.checked && cur.value){
          return acc.length >= 1 ? `${acc}, ${cur.value}` : `${cur.value}`
      } 
      return acc;
    }, "");
}

document.getElementById("log").onclick = () => console.log(getCheckedValuesOf("name"))
console.log(getCheckedValuesOf("name"))

<input type="checkbox" name="name" checked="false" value="1"/>1
<input type="checkbox" name="name" value="2"/>2
<input type="checkbox" name="name" value="3"/>3
<input type="checkbox" name="name" value="4"/>4
<input type="checkbox" name="name" checked="false" value="5"/>5
<input type="checkbox" name="name" value="6"/>6

<button id="log">log</button>

理解如何在这个函数中使用 reduce 代替 map 和 join

Understanding how reduce can be used instead of map and join in this function

javascript

arrays

reduce