JavaScript函数在Firefox中无法执行，请求排查问题原因

嘿，你的代码里确实藏着一个会让Firefox“罢工”的小问题——getAttribute()的参数被错误地用数组包裹了！

Chrome的V8引擎对这类小错误有一定的容错能力，会自动把数组转换成字符串来处理，但Firefox的SpiderMonkey引擎遵循更严格的规范，遇到不符合API要求的参数就会直接抛出错误，导致整个函数执行失败，甚至可能影响后续代码的运行。

错误代码的核心问题 #

// 错误写法：属性名被放在数组里传给getAttribute
let attrVal = toggle.getAttribute(['data-filter']);

Element.getAttribute()方法明确要求传入字符串类型的属性名称，而不是数组，这就是Firefox不买账的原因。

修正后的代码 #

把数组直接去掉，传入字符串形式的属性名就可以了：

// go over each filter button
filterToggles.forEach(function(toggle) {

  let attrVal = toggle.getAttribute('data-filter'); // 直接传字符串属性名
  let newVal = attrVal.replace(' ', '-'); // hyphenate filter attr val
  toggle.setAttribute('data-filter', newVal); // set filter attr with new val

});

另外，为了让代码更健壮，建议加个判断逻辑，避免当元素没有data-filter属性时，attrVal为null导致调用replace()方法报错：

filterToggles.forEach(function(toggle) {
  let attrVal = toggle.getAttribute('data-filter');
  if (attrVal) { // 先判断属性是否存在
    let newVal = attrVal.replace(' ', '-');
    toggle.setAttribute('data-filter', newVal);
  }
});

这样修改后，代码应该能在Firefox和Chrome中都顺畅运行啦。

内容的提问来源于stack exchange，提问作者Crawsh