ES6扩展语法IE不支持

Question

我有一个JavaScript代码，下面给出的是ES6兼容，但IE 11不支持这一点。什么是替代代码，以便它适用于所有浏览器？

[...document.querySelectorAll('.row')] 

进出口使用此为 '点击' 事件处理：

Array.prototype.slice.call(document.querySelectorAll('.row')) 
    .forEach(function(header) { 
     return header.addEventListener('click', function(e) { 
     headerClick(e, header, header.querySelector('.exy')) 
     }); 
    }); 

Answer 1

对于所有浏览器，您可以通过call或apply（它的工作原理任何阵列状对象）上使用Array.prototype.slice：

Array.prototype.slice.call(document.querySelectorAll('.row')) 

---

绕Y我们更新的问题：

进出口使用此为“点击”事件处理：

Array.prototype.slice.call(document.querySelectorAll('.row')) 
    .forEach(function(header) { 
     return header.addEventListener('click', function(e) { 
     headerClick(e, header, header.querySelector('.exy')) 
     }); 
    }); 

我不会用querySelectorAll为此不惜一切，我会使用事件委托。据推测，所有这些.row元素都在一个普通容器内（当然，最终它们都在body之内，但希望有一个容器比它“更接近”）。随着事件委托，你这样做：

• 挂钩click只有一次，容器

• 点击发生时，请查看是否通过你的目标要素之一传递途中在容器上

为您引用代码，这看起来是这样的：

// A regex we'll reuse 
var rexIsRow = /\brow\b/; 
// Hook click on the container 
document.querySelector("selector-for-the-container").addEventListener(
    "click", 
    function(e) { 
     // See if we find a .row element in the path from target to container 
     var elm; 
     for (elm = e.target; elm !== this; elm = elm.parentNode) { 
      if (rexIsRow.test(elm.className)) { 
       // Yes we did, call `headerClick` 
       headerClick(e, elm, elm.querySelector('.exy')); 
       // And stop looking 
       break; 
      } 
     } 
    }, 
    false 
); 

关于更多modern browsers，您可以使用elm.classList.contains("row")而不是正则表达式，但遗憾的是不在IE9或更早的版本中。

---

这就是说，而不是维护一个单独的代码库，为gcampbell pointed out你可以使用ES6（ES2015）功能在你的代码，然后与转换他们transpiler transpile（当然，在那些可以转换，这是很多）ES5语法。 Babel就是这样一个转译器。