在前端开发中，我们常常会使用到 JavaScript 编程语言。ES7（ECMAScript2016）是 JavaScript 的一种版本，它新增了一些新的语法特性，如 Array.prototype.includes() 方法，用于判断数组中是否包含某个元素。然而，如果我们使用 Babel 解析 ES7 代码，就会发现在编译时 includes() 方法存在一些问题，本文将详细介绍这些问题并探讨解决方法。
问题描述
首先，我们来看一个简单的 ES7 代码示例：
--- ----- - --- -- --- --- -------- - ------------------ ---------------------- -- ----
可以看到，这段代码使用了 includes() 方法来判断数组 array 中是否包含元素 2，并将结果存储在 includes 变量中。运行这段代码，输出为 true，说明该数组中确实包含元素 2。
然而，如果我们使用 Babel 将这段代码转换成 ES5 代码，就会发现其中的 includes() 方法会被替换成一个名为 indexOf() 的方法，如下所示：
--- ----- - --- -- --- --- -------- - ---------------- --- --- ---------------------- -- ----
虽然 includes() 方法被替换成了 indexOf() 方法，但代码执行结果并没有受到影响，仍然输出结果为 true。但是，如果我们的代码中使用了 includes() 方法的第二个参数，就会出现问题。
存在的问题
includes() 方法可以接收两个参数，第一个参数为需要查找的元素，第二个参数为从哪个索引开始查找。如果我们在代码中使用了第二个参数，如下所示：
--- ----- - --- -- --- --- -------- - ----------------- --- ---------------------- -- ----
在原生 JavaScript 中，这段代码会输出结果为 true，因为它从数组中第二个元素 2 开始查找，找到了目标元素 2，返回结果为 true。然而，当我们使用 Babel 将这段代码转换成 ES5 代码时，就会发现其中的 includes() 方法被替换成了 indexOf() 方法，但第二个参数却变成了第三个参数，如下所示：
--- ----- - --- -- --- --- -------- - ---------------- --- ---------------------- -- ----
这时，虽然代码中的 includes() 被成功转换成了 indexOf()，但第二个参数 1 却被当做了起始索引位置，导致代码输出结果为 false。这是因为，indexOf() 第二个参数表示从哪个索引位置开始查找，而 includes() 第二个参数表示从哪个元素开始查找。
解决方法
为了避免这种问题，我们可以使用 babel-polyfill 或 babel-runtime-corejs2 这样的库来解决。这些库会在代码中自动添加 includes 方法的 polyfill，以保证代码能够在所有环境下正常运行。
例如，在使用 babel-polyfill 的情况下，可以这样写代码：
------ ----------------- --- ----- - --- -- --- --- -------- - ----------------- --- ---------------------- -- ----
或者，使用 babel-runtime-corejs2 的情况下，可以这样写代码：
------ ------------------------------------ --- ----- - --- -- --- --- -------- - ----------------- --- ---------------------- -- ----
这样，Babel 就会正确编译 includes() 方法，并保留其原有功能。
结论
以上就是 Babel 编译 ES7 中 Array.prototype.includes() 方法存在的问题及解决方法。在编写 ES7 代码时，我们需要注意 includes() 方法与 indexOf() 方法的参数差异，并在编译时添加相应的 polyfill。这不仅可以保证代码在不同环境下正确运行，还有助于我们更好地理解 JavaScript 语言的语法特性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673956ea317fbffedf164c04