如果瀏覽器沒有擴展語法（...函數中的符號）支持，我如何檢測/回退？

Question

對於那些不知道的人，spread 語法是一種將不確定數量的參數傳遞給函數的便捷方式，類似於以下示例：

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

不幸的是，Internet Explorer 和舊版本的其他瀏覽器不支持此功能。 這里有更多關於擴展語法和瀏覽器支持的信息。

我沒有對任何關鍵的東西使用傳播語法，但是在網站上使用它會導致 JavaScript 在那些舊瀏覽器上完全失敗。

一種選擇是我可以為舊瀏覽器創建一個單獨版本的腳本，然后基於用戶代理，傳入這個腳本。但是，我想避免這種情況，因為維護這兩個文件和一般情況都很痛苦如果使用其他功能，這可能會變得更加復雜。 此外，還存在對用戶瀏覽器進行錯誤分類的風險。

另一種選擇是找到一種方法來避免在所有功能中完全使用擴展語法。 但是，這可能會增加開發時間並創建更難理解和處理的代碼。 這似乎不是避免使用新功能的好策略，因為只有很少一部分觀眾無法使用它們。

我希望有人可能擁有或知道一種聰明的方法來檢測對擴展語法的支持，並在用戶瀏覽器不支持擴展語法時排除部分腳本。 通過這種方式，我可以為使用較舊瀏覽器的用戶提供仍然有效的體驗，並且只會遺漏一些功能。 我一直在網上搜索，但找不到任何執行此操作的代碼。 我認為這可能是不可能的，因為它是核心語法修改，但是我也找不到任何可以完全確認這種情況的內容。

Answer 1

雖然檢查瀏覽器支持傳播，然后加載相應的腳本是否是可能的，有一個更容易的選擇：像巴貝爾工具集成到您的構建過程自動自動transpile在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, [");"]));
  }
}

您可以在此處嘗試演示。

這允許您使用最新和最好的語言版本編寫、閱讀和調試，同時仍然允許過時的瀏覽器理解您的腳本的語法。

當然，Babel 不僅限於轉換擴展語法 - 它可以將所有現代語法轉換為 ES5（例如解構、對象擴展、求冪 ( ** ) 等等）。

也就是說，請注意語法的轉換與新的內置函數不同。 例如， Array.prototype.includes是 ES6 的一個特性，但因為它是一個新函數，而不是新語法，所以它不會被轉譯——為了讓舊瀏覽器也理解新函數，使用 polyfills，例如polyfill。哦。

如果你真的很想能夠動態判斷當前客戶端是否支持擴展語法，你可以使用new Function來查看語法是否正確解析：

 function supportsSpread() { try { new Function('foo(...params);'); return true; } catch(e) { return false; } } console.log(supportsSpread());

（但確實沒有任何充分的理由這樣做）