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就是這樣一個轉譯器。