循环遍历节点列表的有效方法？答案

【问题标题】：efficient way to loop through nodelist?循环遍历节点列表的有效方法？
【发布时间】：2021-01-27 03:41:13
【问题描述】：

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

<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 来做到这一点？

【问题讨论】：

reduce 得到我的投票：至少在您的示例中，您正在获取一个数组并产生一个值（最终）。
主要问题似乎是您的数据模型和视图是混合的，因此您必须一直从 DOM 中提取状态。

标签： javascript jquery arrays performance mapreduce

【解决方案1】：

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

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

如下：

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

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

【讨论】：