遍历节点列表的有效方法？

Question

我经常需要遍历网页中的元素，获取一些属性，并将它们发送到服务器。
我有一个由 user_id 组成的列表，每个 div:

<div class="user-box" user_id="1">
  //stuff
</div>
<div class="user-box" user_id="2">
  //stuff
</div>
<div class="user-box" user_id="3">
  //stuff
</div>
<div class="user-box" user_id="4">
  //stuff
</div>

使用jQuery：

let ids = "";
$(".user-box").each(function(){
 ids+= $(this).attr("user_id")+"|"
})

ids 变量看起来像这样“1|2|3|4|”

我试过这样使用 map/reduce：

    function doStuff(selector, attribute,separator) {
    let mySring = Array.from(
        document.querySelectorAll(selector)).map(
            x => x.getAttribute(attribute)).reduce(
                (acc, cv) => acc + separator + cv);
    return myString
}

let x = doStuff(".user-box","user_id","|");

我得到了相同的结果。

如何使用 javascript 而不是 jQuery 来做到这一点？

Answer 1

除了不同的缩进，您还可以：

使用 join 而不是 reduce 来插入分隔符。这也将避免在最后添加分隔符。
避免创建一个中间数组：使用 Array.from

如下：

function doStuff(selector, attribute, separator) {
    return Array.from(
        document.querySelectorAll(selector),
        x => x.getAttribute(attribute)
    ).join(separator);
}

关于reduce的备注：您在没有初始值参数的情况下使用它。请注意，如果您这样做，并且调用它的数组为空（没有匹配选择器），您将收到错误消息。

遍历节点列表的有效方法？

efficient way to loop through nodelist?

javascript

arrays

performance

jquery

mapreduce