gpt4 book ai didi

javascript - 了解如何使用 reduce 代替 map 和 join 这个函数

转载 作者:行者123 更新时间:2023-12-01 15:34:27 24 4
gpt4 key购买 nike

我有以下函数,它使用给定的元素名称获取我的 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)]
// 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>

关于javascript - 了解如何使用 reduce 代替 map 和 join 这个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63410425/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com