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