将 JQuery Each 转换为 ES6/7 循环答案

【问题标题】：Convert JQuery Each into ES6/7 loop将 JQuery Each 转换为 ES6/7 循环
【发布时间】：2019-03-07 03:45:29
【问题描述】：

我正在尝试删除一个 jQuery 依赖项，并用循环替换这个 .each 证明很棘手。

// inline <img> when src = .svg so it is styled with CSS 

$('[src$=".svg"]').each(function() { // get .svg 
  var $img = $(this);
  var imgURL = $img.attr("src"); // get src url
  $.get(
    imgURL,
    function(data) { // Get the SVG guts from image file
      var $svg = $(data).find("svg");
      $img.replaceWith($svg);  // Replace img with SVG guts
    }, "xml"
  );
});

【问题讨论】：

您的问题是什么？您已经尝试过哪些不起作用的方法？
根据您的需要，您可以使用map() 或forEach()。但是替换 .each() 调用并不是唯一的 jQuery 依赖项。您还需要用其他东西实现匹配。
youmightnotneedjquery.com
欢迎来到stackoverflow @AndyFitz，因此，您的问题很难理解，因为很难看到您在问什么。你能说一些更多的细节吗？（错误信息，是什么阻碍了你）
您能否澄清一下您所说的“证明棘手”是什么意思？

标签： javascript ecmascript-6 ecmascript-2016

【解决方案1】：

浏览器实现 jQuery 风格的选择器和集合方法。因此，可以使用 document.querySelectorAll 在 vanilla JavaScript 中模拟 jQuery 每个循环以返回 NodeList，这是一个类似数组的对象，有点像 jQuery 集合：

const nodeList = document.querySelectorAll('[src$=".svg"]')

你可以从数组中借用forEach方法：

Array.prototype.forEach.call(nodeList, node => {
  // do something
})

大多数浏览器（IE除外）实际上直接在NodeLists上支持forEach方法：

nodeList.forEach(node => {
  // do something
})

您还可以使用 for/while 循环并使用方括号语法访问各个元素：

for (let i = 0; i < nodeList.length; i++) {
  // current element is nodeList[i]
}

【讨论】：

谢谢！ For 循环是上述选项中性能最高的，对吧？
还有一点点complicated