ES6 扩展语法 IE 不支持

Question

我有下面给出的 javascript 代码，它与 ES6 兼容，但 IE 11 不支持此代码。要使其适用于所有浏览器的替换代码是什么？

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

我将其用于 'click' 事件处理：

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-like 对象）：

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

关于您更新的问题：

Im using this for 'click' event handling:

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 中，但希望它们有一个容器 "closer" ）。使用事件委托，您可以这样做：

仅在容器上挂钩 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 或更早版本上使用。

就是说，而不是维护一个单独的代码库，因为 you could use ES6 (ES2015) features in your code and then transpile with a transpiler that converts them (well, the ones that can be converted, which is a lot of them) to ES5 syntax. Babel 就是这样一个转译器。

ES6 扩展语法 IE 不支持

ES6 spread syntax IE not supported

javascript

internet-explorer-11