在 ES6 中，引入了新的数组方法 Array.includes() 用于查找数组中是否包含某个元素。然而，在使用 Babel 编译 ES6 代码时，我们可能会遇到一个关于 Array.includes() 的 bug。
问题描述
假设我们有以下的 ES6 代码：
const arr = [1, 2, 3]; console.log(arr.includes(2));
当我们使用 Babel 对其进行编译，输出成 ES5 代码后，会得到以下的代码：
"use strict"; var arr = [1, 2, 3]; console.log(arr.indexOf(2) !== -1);
然而，这样编译出来的代码与原本的代码并不完全一致，存在一个微小的差别。当我们使用 Array.includes() 判断一个元素是否在数组中时，其实是返回一个布尔值 true 或 false。而使用 arr.indexOf(2) !== -1 进行同样的判断，返回的是 true 或者该元素的下标。这就可能导致一些奇怪的行为，例如：
const arr = ["a", "b", "c"];
if(!arr.includes("d")) {
console.log("This should not happen!");
}这段代码中的 console.log() 将永远不会被执行，因为 arr.includes("d") 返回的是 false，而 !false 等于 true。
解决方法
为了解决这个问题，我们可以在 .babelrc 文件中指定我们需要使用的插件：
{
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-modules-commonjs"
]
}其中，"@babel/plugin-transform-runtime" 插件会为所有需要的与 runtime 相关的 helper 和 runtime 注入一个独立的代码。这样做的好处是可以减少代码冗余并提供更好的可靠性与可重用性。但是，它并不包括 polyfills，因此我们还需要添加一个 polyfill 来修复 Array.include() 的问题：
import "core-js/modules/es.array.includes"; // 导入 polyfill
或者：
require("core-js/modules/es.array.includes"); // 导入 polyfill这样，我们就可以愉快地使用 Array.includes() 了！
结论
在使用 Babel 编译 ES6 代码时，我们需要注意可能存在的 Array.includes() bug。为了修复该问题，我们需要添加一个 polyfill 来确保正确运行。同时，我们应该一直保持对代码进行监视，以确保它们在编译过程中没有丢失任何关键功能。
示例代码
-- -------------------- ---- ------- -- -------- ------ ------------------------------------ ----- --- - --- -- --- ----------------------------- ----- ---- - ----- ---- ----- ----------------------- - ----------------- ------ --- ---------- -
// .babelrc
{
"plugins": [
"@babel/plugin-transform-runtime"
]
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ce9145f551281025bfe73