循環遍歷節點列表的有效方法？

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 ：您在沒有初始值參數的情況下使用它。 請注意，如果您這樣做，並且您調用它的數組為空（選擇器沒有匹配項），您將收到錯誤消息。