解决在浏览器中使用 ES12 中的 Array.includes 产生的错误

在 ES12 版本中，Array 类型新增了一个 includes 方法，该方法用于判断数组中是否包含特定元素。这个方法在日常开发中十分实用，尤其是用于判断某个元素是否在数组中存在。但是，由于浏览器的兼容性问题，在某些浏览器中使用 Array.includes 方法会出现错误。

兼容性问题

在 ES12 规范中，Array.includes 方法是被广为支持的。但是，在一些老版本浏览器中，并未支持该方法。对于这个问题，我们需要考虑到一些解决方案。

解决方案

下面列举了三个主要的解决方案，供大家参考。

方案一：使用 polyfill

polyfill 的作用在于，为不支持新语法的浏览器提供类似的 API 接口，通过模拟实现的方式，达到与新语法的兼容性。对于 Array.includes 方法，我们可以使用以下 polyfill 代码：

if (!Array.prototype.includes) {
  Array.prototype.includes = function (value) {
    return this.indexOf(value) !== -1;
  };
}

这个 polyfill 的实现原理很简单，就是对不支持 includes 方法的浏览器手写实现该函数。

方案二：使用 babel 编译

可以使用 Babel 对 ES6+ 语法进行编译，将新语法转换为老语法，从而达到浏览器兼容的目的。具体方法如下：

1. 安装 @babel/cli 和 @babel/preset-env

npm install --save-dev @babel/cli @babel/preset-env

1. 在 .babelrc 文件中进行配置

{
  "presets": ["@babel/preset-env"]
}

1. 在代码中使用 ES6+ 语法

例如：

const arr = [1, 2, 3];
if (arr.includes(1)) {
  console.log('Found');
}

1. 进行编译

npx babel script.js --out-file script-compiled.js

方案三：使用 lodash 库

Lodash 是一个实用工具库，提供了一些函数式编程的辅助方法，其中包括了类 Array 的 includes 方法 _.includes()。使用 lodash 可以轻松处理兼容性问题，同时还能获得更好的性能和更多的辅助方法。

总结

Array.includes 方法是比较常用的一种数组查找方法，但在浏览器兼容性问题方面依旧存在着一些问题。解决起来也比较容易，可以使用 polyfill、Babel 编译和 Lodash 库等方式，在应对兼容性问题的同时也能从中获得更多的辅助方法和性能上的提高。

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