背景
在开发前端项目时，我们经常需要对数组进行操作，其中使用 array.includes 方法来检查数组中是否包含某个元素是一个很常见的需求。然而，由于不同浏览器支持的 ES 版本不同，我们需要使用 polyfill 或者 Babel 等工具来帮助我们实现跨浏览器的兼容性。
在使用 Babel 进行编译时，我们常常遇到 array.includes is not a function 的错误，这是因为 Babel 默认将 array.includes 方法转换成了较为复杂的表达式，导致在执行时出现识别错误。那么我们如何解决这个问题呢？
问题分析
首先，我们需要了解 Babel 在编译 array.includes 方法时的具体处理过程。默认情况下，Babel 会将该方法转换成下面的表达式：
var _context;
if ((_context = ["a", "b"]).includes("a")) {
// true
}我们可以看到，这是一个检查 _context 数组中是否包含某个元素的表达式。然而，在执行这段代码时，我们会发现浏览器提示 _context.includes is not a function 错误。
这是因为在原本的 array.includes 方法中，方法名 includes 是一个属性名，而在 Babel 转换后的代码中，includes 变成了一个变量名，导致了识别错误。
解决方法
为了解决这个问题，我们可以使用 Babel 的 @babel/preset-env 插件的 useBuiltIns 选项来引入 core-js 库提供的 polyfill。这个 polyfill 可以自动检查业务代码中所使用的 ES 特性，并只导入必要的 polyfill，避免业务代码体积过大。
以一个简单的示例代码为例：
const arr = ["a", "b", "c"];
if (arr.includes("b")) {
console.log("found b in arr");
}我们可以修改 Babel 配置文件 .babelrc 如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-然后安装 core-js 库：
npm install core-js@3
最后，我们在业务代码的入口处添加 import "core-js/stable"; 即可实现 polyfill。
import "core-js/stable";
const arr = ["a", "b", "c"];
if (arr.includes("b")) {
console.log("found b in arr");
}通过这种方式，在 Babel 转换时，array.includes 方法会被正确地转换为原生支持的代码，同时避免了对象无法正确识别的问题。
总结
在开发前端项目时，我们不可避免地需要面对浏览器兼容性的问题。使用 Babel 等工具可以帮助我们实现跨浏览器的兼容，而在编译 array.includes 方法时，我们需要避免在代码中出现对象无法正确识别的问题。通过引入 core-js 库提供的 polyfill，我们可以轻松地解决这个问题，实现跨浏览器的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494227848841e98941a7a0e