在前端开发中，我们常常会使用 ECMAScript 2017（ES2017）的新特性来提高代码的效率和可读性。然而，在某些情况下，我们会发现使用 ES2017 编写的代码在 Safari 浏览器上无法正常运行，这给开发带来了很多不便。本文将详细介绍这个问题的原因，并提供解决方案。
问题原因
在 Safari 浏览器中，ES2017 的新特性并不是完全支持的。其中最常见的问题是使用了 async/await 关键字的代码无法正常运行。这是因为 Safari 仅支持 Promise 对象的基本语法，而不支持 async/await 的语法糖。
解决方案
针对这个问题，我们可以采用以下解决方案：
1. 使用 Babel 转译
Babel 是一个广泛使用的 JavaScript 转译器，它可以将 ES2017 代码转换为 ES5 代码，从而兼容更多的浏览器。我们可以使用 Babel 来将使用了 async/await 的代码转译为基本的 Promise 代码。以下是一个使用 Babel 转译的示例代码：
-- ------ --
----- -------- ----------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
-
-- ------
-------- ----------- -
------ -------------------------------------
-------------- -- ----------------
---------- -- ------
-需要注意的是，使用 Babel 转译会增加代码的体积和复杂度，因此需要谨慎使用。
2. 使用 Polyfill 库
Polyfill 是一种将新的 API 或语言特性引入到旧的浏览器中的方法。我们可以使用一些 Polyfill 库来在 Safari 浏览器中模拟 async/await 的行为。其中最常用的库是 regenerator-runtime。以下是一个使用 regenerator-runtime 的示例代码：
-- -- -------- - ------ ------------------------------ -- ------ -- ----- -------- ----------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
需要注意的是，Polyfill 库会增加代码的体积，但相比起 Babel 转译，它的性能更好。
总结
在本文中，我们介绍了 Safari 浏览器上无法运行 ES2017 代码的问题，并提供了两种解决方案：使用 Babel 转译和使用 Polyfill 库。需要根据具体情况选择合适的解决方案。同时，我们也需要注意代码的体积和性能问题，以免影响网站的加载速度和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6585b2dbd2f5e1655d044ad2