Babel 编译 ES7 中的 Array.prototype.includes() 方法存在的问题

在前端开发中，我们常常会使用到 JavaScript 编程语言。ES7（ECMAScript2016）是 JavaScript 的一种版本，它新增了一些新的语法特性，如 Array.prototype.includes() 方法，用于判断数组中是否包含某个元素。然而，如果我们使用 Babel 解析 ES7 代码，就会发现在编译时 includes() 方法存在一些问题，本文将详细介绍这些问题并探讨解决方法。

问题描述

首先，我们来看一个简单的 ES7 代码示例：

let array = [1, 2, 3];

let includes = array.includes(2);

console.log(includes); // true

可以看到，这段代码使用了 includes() 方法来判断数组 array 中是否包含元素 2，并将结果存储在 includes 变量中。运行这段代码，输出为 true，说明该数组中确实包含元素 2。

然而，如果我们使用 Babel 将这段代码转换成 ES5 代码，就会发现其中的 includes() 方法会被替换成一个名为 indexOf() 的方法，如下所示：

var array = [1, 2, 3];

var includes = array.indexOf(2) !== -1;

console.log(includes); // true

虽然 includes() 方法被替换成了 indexOf() 方法，但代码执行结果并没有受到影响，仍然输出结果为 true。但是，如果我们的代码中使用了 includes() 方法的第二个参数，就会出现问题。

存在的问题

includes() 方法可以接收两个参数，第一个参数为需要查找的元素，第二个参数为从哪个索引开始查找。如果我们在代码中使用了第二个参数，如下所示：

let array = [1, 2, 3];

let includes = array.includes(2, 1);

console.log(includes); // true

在原生 JavaScript 中，这段代码会输出结果为 true，因为它从数组中第二个元素 2 开始查找，找到了目标元素 2，返回结果为 true。然而，当我们使用 Babel 将这段代码转换成 ES5 代码时，就会发现其中的 includes() 方法被替换成了 indexOf() 方法，但第二个参数却变成了第三个参数，如下所示：

var array = [1, 2, 3];

var includes = array.indexOf(2, 1);

console.log(includes); // true

这时，虽然代码中的 includes() 被成功转换成了 indexOf()，但第二个参数 1 却被当做了起始索引位置，导致代码输出结果为 false。这是因为，indexOf() 第二个参数表示从哪个索引位置开始查找，而 includes() 第二个参数表示从哪个元素开始查找。

解决方法

为了避免这种问题，我们可以使用 babel-polyfill 或 babel-runtime-corejs2 这样的库来解决。这些库会在代码中自动添加 includes 方法的 polyfill，以保证代码能够在所有环境下正常运行。

例如，在使用 babel-polyfill 的情况下，可以这样写代码：

import 'babel-polyfill';

let array = [1, 2, 3];

let includes = array.includes(2, 1);

console.log(includes); // true

或者，使用 babel-runtime-corejs2 的情况下，可以这样写代码：

import 'core-js/modules/es.array.includes';

let array = [1, 2, 3];

let includes = array.includes(2, 1);

console.log(includes); // true

这样，Babel 就会正确编译 includes() 方法，并保留其原有功能。

结论

以上就是 Babel 编译 ES7 中 Array.prototype.includes() 方法存在的问题及解决方法。在编写 ES7 代码时，我们需要注意 includes() 方法与 indexOf() 方法的参数差异，并在编译时添加相应的 polyfill。这不仅可以保证代码在不同环境下正确运行，还有助于我们更好地理解 JavaScript 语言的语法特性。

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