ECMAScript 2018（简称 ES2018）是最新的 JavaScript 语言标准，它包含了一些新的语言特性和更新。然而，当你使用 ES2018 的一些特性时，它可能会在旧版浏览器中报错。本文将介绍如何解决这个常见的 bug。
问题
使用 ES2018 的一些特性（例如异步迭代器，Promise 的 finally 方法）时，可能会在旧版浏览器中报错，提示“SyntaxError: Unexpected token”。这是因为这些特性在旧版浏览器中不被支持。
例如，下面的代码是使用异步迭代器：
-- -------------------- ---- -------
----- --------- ---------------- -
----- ----- -------------------
----- ----- -------------------
----- ----- -------------------
-
------ -- -- -
--- ----- ------ --- -- ----------------- -
-----------------
-
-----如果你运行这段代码，在旧版浏览器中将看到“SyntaxError: Unexpected token”错误。
解决方案
解决这个问题的方法是将 ES2018 的特性转化为在旧版浏览器中支持的语法。我们可以使用一些工具来完成这个转化，例如：
在这些工具中，Polyfill 是最简单的解决方案。Polyfill 是一个 JavaScript 库，它使用平稳退化的方法实现了一些新特性，以便在旧版浏览器中使用。
例如，要使上面的代码在旧版浏览器中正常运行，可以添加以下代码来加载 Polyfill 垫片：
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise.prototype.finally,es2018"></script>
这将加载与 ES2018 相关的所有 polyfill。在现代浏览器中，这不会产生任何影响，因为它们已经支持这些特性。
经过转换和垫片加载后，上面的代码就将变为：
-- -------------------- ---- -------
--- -------------- - ---------------------- --------- ------------------ -
----- ----------------------------
----- ----------------------------
----- ----------------------------
---
--------- -- -
--- - - ------------------------------
-------- ------ -
------ ----------------- -----------
-
-------- ------- -
----- - ------------------------------------------------- -------- -
--- ----
------ -------------------------------- ---------------- -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------
---- --
-- ----------------------- -
------------- - --
------
-
------ --------------------------
---- --
--- - --------------------
-----------------
------------- - --
------ ---------------------
---- --
------------- - --
------
---- ---
---- ------
------ ----------------
-
-
-- --------
----
------ ----------------- -----------
-
-------- -------------------- -
------ -------- -- -
--- ---- - -----
---- - ----------
------ --- ---------------- --------- ------- -
--- --- - -------------- ------
-------- --------- ---- -
--- -
--- ---- - --------------
--- ----- - -----------
- ----- ------- -
--------------
-------
-
-- ----------- -
---------------
- ---- -
------------------------------------ ------- -
------------ -------
-- -------- ----- -
------------- -----
---
-
-
------ -------------
---
--
-
-------- ------------------------- ----------- ---------- -
------ --- ---------------- --------- ------- -
--- ----------------- - ------------------------ ------------
-------- --------- ---- -
--- -
--- ---- - ----------------------------
--- ----- - -----------
- ----- ------- -
--------------
-------
-
-- ----------- -
---------------
- ---- -
------------------------------------ ------- -
------ ------------ -------
-- -------- ----- -
------ ------------- -----
---
-
-
------ -------------
---
-
-------- ------------------- -
--- -- --
------ --------------------------------- ---------------------------- -
----- --- -
------ --------------- - --------------- -
---- --
- - ------------
---- --
-- --- - --------------- -
-------------- - --
------
-
-------------- - --
------ -----------------
---- --
- - ----------- ----------------
---- --
-------------- - --
------
---- --
---- ------
------ -----------------
-
-
---
-
-------- ---------------- -
-- ----------------------- ----- --- ------------------------------- -- --- -----------
--- - - ------------------------
--
-- --- ------ ----------
- - ------ -------- --- ---------- - ----------- - ---------------------
- - ---
------ -------------------------- -- -
-------- ------------------ --
-------------------------- - --
------ --- -------------------------- - -------- ----- -
------ -----
-- ------------------ - -------- -- -
------ -----
-- --
------
-------- ------------ -
--- ------- - -------- -------- ----------
--- --------- - ---------------------
--------
----- -------- - ----------------- -------------- -
--- ------ - ----------------
-- -------- --------- - --------------
-
-- ---------------- ----- --- ----------------- -- --- ----- -----------
------ --
-
-------- ---------- -
------ ---- ---------- ------- - ------- - -- ----- - --- -----------
-
-------- ------------------------- ----------- ---------- -
------ --- ---------------- --------- ------- -
--- ----------------- - ------------------------ ------------
-------- --------- ---- -
--- -
--- ---- - ----------------------------
--- ----- - -----------
- ----- ------- -
--------------
-------
-
-- ----------- -
---------------
- ---- -
------------------------------------ ------- -
------ ------------ -------
-- -------- ----- -
------ ------------- -----
---
-
-
------ -------------
---
-
-
-----现在，这段代码将在旧版浏览器中运行而没有错误。
结论
在使用 ES2018 的特性时，如果想要在旧版浏览器中支持它们，我们可以使用工具（如 Babel、TypeScript）或使用 Polyfill 来转换它们。这有助于确保你的代码在所有浏览器中都能正常工作，同时让你能够受益于 ES2018 的新特性。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773abd96d66e0f9aae6121a