使用 ECMAScript 2016 (ES7) 新特性简化代码 ——Array.prototype.includes()-JavaScript中文网-JavaScript教程资源分享门户

使用 ECMAScript 2016 (ES7) 新特性简化代码 ——Array.prototype.includes()

在前端开发中，我们常常需要处理数组，比如查询数组中是否包含某个元素，我们会使用 indexOf() 方法，但该方法有时会导致代码不够优雅，ES7 中的 Array.prototype.includes() 方法可以帮我们解决这个问题。

Array.prototype.includes() 的使用

includes() 方法用于判断数组是否包含某个元素，它返回一个布尔值。

语法：

array.includes(searchElement[, fromIndex])

参数：

searchElement：需要查找的元素
fromIndex（可选）：从哪个索引开始查找

示例：

const arr = ['apple', 'banana', 'orange'];
const hasApple = arr.includes('apple');
console.log(hasApple); // true
const hasPeach = arr.includes('peach');
console.log(hasPeach); // false

实际应用

我们可以使用 includes() 方法简化代码，比如下面这个例子：

// javascriptcn.com 代码示例
// 普通写法
if (arr.indexOf('apple') !== -1) {
  // do something
}

// 使用 includes() 的写法
if (arr.includes('apple')) {
  // do something
}

这样写更加简洁优雅，可读性也更好。

注意事项

虽然 includes() 方法是 ES7 中的新特性，但不是所有浏览器都支持，如果要在项目中使用，需要考虑兼容性问题。

可以使用 babel-polyfill 或者 core-js 配合 babel 转译，确保代码在所有浏览器中运行。

示例代码：

// javascriptcn.com 代码示例
// 安装依赖
npm i babel-polyfill core-js

// 配置 babel
// .babelrc
{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

// 在项目入口处引入 polyfill
import "babel-polyfill";

总结

ES7 中的 Array.prototype.includes() 方法可以帮助我们更加优雅地处理数组，让代码更加简洁易读。但是需要注意浏览器兼容性问题，可以使用 babel-polyfill 或者 core-js 配合 babel 转译，确保代码在所有浏览器中运行。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d2fe17d4982a6ebe9afac