使用 es5-shim 和 es6-shim 解决 ES5 和 ES6 关键字不支持的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们可能会遇到一些旧版浏览器不支持 ES5 和 ES6 的关键字的情况，例如 Promise 和 Object.assign 等。为了解决这个问题，我们可以使用 es5-shim 和 es6-shim 这两个库。

es5-shim

es5-shim 是一个适用于 ES5 环境的库，它可以使旧版浏览器支持 ES5 的一些新特性。具体来说，它提供了以下功能：

实现了 Array.prototype、Function.prototype、String.prototype 和 Object.prototype 的一些新方法，例如 Array.prototype.forEach、Function.prototype.bind、String.prototype.trim 和 Object.keys 等；
实现了 JSON 对象；
重写了 Date.prototype.toISOString 方法；
提供了 Object.create、Object.defineProperty 和 Object.defineProperties 方法等。

使用 es5-shim 的方法非常简单，只需要在 HTML 文件中引入相应的 JS 文件即可：

<script src="https://cdn.jsdelivr.net/es5-shim/4.5.10/es5-shim.min.js"></script>

这里使用的是 jsdelivr 的 CDN，也可以自己下载并引入。

es5-shim 还有一个衍生库 es5-sham，它完善了 es5-shim 的一些功能，例如 Array.prototype.indexOf 和 Array.prototype.lastIndexOf 方法。使用方法也类似，只需要引入对应的 JS 文件即可：

<script src="https://cdn.jsdelivr.net/es5-shim/4.5.10/es5-sham.min.js"></script>

es6-shim

es6-shim 是一个适用于 ES6 环境的库，它可以使旧版浏览器支持 ES6 部分新特性。具体来说，它提供了以下功能：

实现了 Promise 对象；
实现了 Array 对象的新方法，例如 Array.from、Array.of 和 Array.prototype.fill 等；
实现了 String 对象的新方法，例如 String.prototype.repeat、String.prototype.startsWith 和 String.prototype.endsWith 等；
实现了 Object 对象的新方法，例如 Object.assign 和 Object.is 等。

使用 es6-shim 的方法同样非常简单，只需要在 HTML 文件中引入相应的 JS 文件即可：

<script src="https://cdn.jsdelivr.net/es6-shim/0.35.5/es6-shim.min.js"></script>

同样地，这里使用的是 jsdelivr 的 CDN，也可以自己下载并引入。

需要注意的是，使用 es6-shim 时，需要使用 babel-polyfill 或 core-js 作为依赖，以确保新的特性能够正确运行。例如：

import 'babel-polyfill'

// 或者

import 'core-js'

这样就能够使你的代码在旧版浏览器中正确运行了。

总结

通过使用 es5-shim 和 es6-shim 这两个库，我们可以方便地解决旧版浏览器不支持 ES5 和 ES6 的关键字的问题。当然，我们还应该注意代码的兼容性，使用一些编译工具或者 polyfill，以确保代码在不同环境下都能够正确运行。

示例

下面是一个使用 Promise 的示例，使用 es6-shim 和 babel-polyfill：

import 'babel-polyfill'
import 'es6-shim'

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

这样就可以在旧版浏览器上使用 Promise 了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6496908948841e98943beda5