如果浏览器没有传播语法（...功能中的表示法）支持，如何检测/回退？

Question

对于那些不知道的人，扩展语法是将未确定数量的参数传递给函数的便捷方法，类似于此示例：

  function debug (mode, string, ...params) {
    if (debug_enabled && window.console) {
      console.log(mode+": "+string+"(",...params,");");
    }
  }

遗憾的是，Internet Explorer和其他浏览器的旧版本不支持此功能。 There is more information on spread syntax and browser support here.

我没有使用扩展语法来处理任何关键的东西，但是在网站上出现它会导致JavaScript在这些旧浏览器上完全失败。

一个选择是我可以为旧浏览器提供单独的脚本版本，然后基于用户代理，将此脚本传入。但是，我想避免这种情况，因为维护这两个文件和作为一般文件很难策略如果使用其他功能，这可能会变得更加复杂。此外，存在错误地对用户的浏览器进行分类的风险。

另一种选择是找到一种方法来避免在所有功能中完全使用扩展语法。但是，这可能会增加开发时间并创建难以理解的代码并继续使用。这似乎不是避免使用新功能的好策略，因为很少一部分观众无法使用它们。

我希望如果用户的浏览器不支持扩展语法，有人可能拥有或知道一种聪明的方法来检测扩展语法的支持并排除部分脚本。通过这种方式，我可以为旧浏览器上的用户提供仍然可用的体验，并且只会遗漏一些功能。我一直在网上搜索，但未能找到任何代码。我认为这可能是不可能的，因为它是一个核心语法修改，但是我找不到任何东西来完全确认这种情况。

Answer 1

在检查浏览器是否支持传播然后加载适当的脚本时，有一个更容易的选择：将像Babel这样的工具集成到构建过程中，自动将ES6 +语法中的代码自动转换为ES5。例如，如果将以下内容插入Babel：

function debug (mode, string, ...params) {
  if (debug_enabled && window.console) {
    console.log(mode+": "+string+"(",...params,");");
  }
}

你得到

"use strict";

function debug(mode, string) {
  if (debug_enabled && window.console) {
    var _console;

    for (var _len = arguments.length, params = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      params[_key - 2] = arguments[_key];
    }

    (_console = console).log.apply(_console, [mode + ": " + string + "("].concat(params, [");"]));
  }
}

您可以尝试演示here。

这允许您使用最新和最好的语言版本进行编写，读取和调试，同时仍允许过时的浏览器理解脚本的语法。

Babel不仅仅局限于传播扩展语法，当然 - 它可以将所有现代语法转换为ES5（例如解构，对象扩散，取幂（**）等等）。

也就是说，请注意语法的转换与新的内置函数不同。例如，Array.prototype.includes是一个ES6功能，但因为它是一个新功能，而不是新语法，它不会被转换 - 让旧浏览器也能理解新功能，使用polyfill，例如，polyfill.io。