香草 javascript 中的 Each() 问题

Question

每次我尝试在 vanilla JavaScript 中重现 .each() jQuery 函数时，我都遇到了麻烦。

当我尝试改变这个时：

$("[data-lng]").each(function(){
   var lng = $(this).data('lng');
   $('#language').text(lng)
});

为此：

var elem = document.querySelectorAll("[data-lng]");
Array.prototype.forEach.call(elem, function(){
    document.getElementById('language').write = elem.dataset.lng
});

控制台returnselem.dataset is not defined

另外，我正在处理 data 的事情，所以我什至不确定写这个 document.querySelectorAll("[data-lng]")

是否合法

感谢您的帮助！

PS : 下面是我想转换成 vanilla JS 的例子： https://jsfiddle.net/x93oLad8/4/

Answer 1

首先，而不是使用：

Array.prototype.forEach.call(elem, function()

你可以直接使用

elem.forEach(function()

其次，回调函数可以接受参数（具体为3个）： el - 当前元素（您要找的 "this" 是哪个？:)） index - 数组中当前元素的索引 list - 你循环的节点列表

用法：

elem.forEach(function(el, index, list){
    console.log(el); //logs current element
});

阅读更多：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

@Edit：由于在第一部分的评论中有很大的讨论，我觉得有义务 link 一个关于在 JS 中覆盖默认方法的线程：[].slice or Array.prototype.slice (a.k.a 为什么 elem.forEach 可能不起作用，以防万一:))

Answer 2

将您的 jsFiddle 示例换成 vanilla JS 相当简单。需要注意的 'gotcha' 是 IE 不支持 NodeList.prototype.forEach() 因此使用常规的 for 循环代替。（参见：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach）

var dictionary = {
  'greet': {
    'it': 'Ciao',
    'en': 'Hello',
    'fr': 'Salut',
  }
};
var langs = ['it', 'en', 'fr'];
var current_lang_index = 0;
var current_lang = langs[current_lang_index];

window.change_lang = function() {
  current_lang_index = ++current_lang_index % 3;
  current_lang = langs[current_lang_index];
  translate();
}

function translate() {
  /* jQuery:
      $("[data-translate]").each(function(){
      var key = $(this).data('translate');
      $(this).html(dictionary[key][current_lang] || "N/A");
  });*/
  
  /* vanilla */
  var dt = document.querySelectorAll("[data-translate]");
  //iterate over the NodeList:
  for (i = 0; i < dt.length; ++i) {
    var key = dt[i].getAttribute('data-translate');//get the key
    dt[i].innerHTML = (dictionary[key][current_lang] || "N/A");//set the text
  }
  
}

translate();

<div data-translate="greet"></div>
<button onclick="change_lang()">Change Language</button>

香草 javascript 中的 Each() 问题

Each() issue in vanilla javascript

javascript

each