Question

我经常不得不遍历网页中的元素，获取一些属性，然后将它们发送到服务器。
我在每个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？

Answer 1

除了缩进以外，您还可以：

使用join代替reduce插入分隔符。这样也可以避免在最后添加分隔符。
避免创建一个中间数组：使用Array.from的回调参数

如下：

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

关于reduce的注释：您使用的时候没有初始值参数。请注意，如果执行此操作，并且调用它的数组为空（选择器不匹配），则会出现错误。

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

1 个答案: