不支持ES6扩展语法IE [英] ES6 spread syntax IE not supported

问题描述

我在下面提供了与ES6兼容的javascript代码，但是IE 11不支持此代码.这样在所有浏览器中都可以使用的替换代码是什么?

I have a javascript code that is given below that is ES6 compatible however IE 11 does not support this. What would be the replacement code for this such that it works across all browsers?

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

我正在使用它进行'click'事件处理:

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'))
      });
    });

推荐答案

对于所有浏览器，您都可以通过call或apply使用Array.prototype.slice(它适用于任何类似于数组的对象):

For all browsers, you can use Array.prototype.slice via call or apply (it works on any array-like object):

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

---

关于您更新的问题:

---

About your updated question:

我正在使用它进行'click'事件处理:

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中，但是希望有一个比它们更接近"的容器).使用事件委托，您可以执行以下操作:

I wouldn't use querySelectorAll for this at all, I'd use event delegation. Presumably all of those .row elements are inside a common container (ultimately, of course, they're all in body, but hopefully there's a container "closer" to them than that). With event delegation, you do this:

• 仅一次将click钩在容器上

发生点击时，检查它是否在到达容器的途中通过了您的目标元素之一

When a click occurs, check to see if it passed through one of your target elements en route to the container

对于您引用的代码，看起来像这样:

For your quoted code, that looks something like this:

// 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
);

在更多的现代浏览器中，您可以使用elm.classList.contains("row")而不是正则表达式，但是很遗憾不在IE9或更早版本上.

On more modern browsers, you could use elm.classList.contains("row") instead of the regular expression, but sadly not on IE9 or earlier.

这就是说，而不是维护单独的代码库，如 gcampbell指出的那样您可以在代码中使用ES6(ES2015)功能，然后使用将这些功能(很多可以转换的功能)转换为ES5语法的编译器进行编译. Babel 就是这样的转译器.

That said, rather than maintaining a separate codebase, as gcampbell pointed out 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 is one such transpiler.

这篇关于不支持ES6扩展语法IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！