ES7 中 Array.prototype.includes 方法的详解及其在实际项目中的应用

在 JavaScript 编程中，数组是最常用的数据结构之一。ES7 提供了一个新方法 Array.prototype.includes，用于判断数组是否包含指定元素。本篇文章将详细介绍该方法的用法、特点以及在实际项目中的应用。

方法介绍

在 ES7 中，Array.prototype.includes 方法的基本语法如下：

arr.includes(searchElement[, fromIndex])

这里，arr 是需要查找的数组，searchElement 是需要查找的元素，fromIndex 是查找的起始索引（可选），默认值为 0。

方法特点

ES7 的 Array.prototype.includes 方法有以下几个特点：

1. 返回值为布尔值，表示是否包含指定元素。

2. 方法内部使用 Object.is() 方法严格相等比较，可以正确处理 NaN 等特殊情况。

3. 参数 fromIndex 可以为负数，表示倒数查找。

方法示例

下面是一些 Array.prototype.includes 方法的示例：

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(2, 2) // false
[1, 2, 3].includes(3, -1) // true

实际项目中的应用

Array.prototype.includes 方法可以用于快速判断一个数组是否包含指定元素。以下是一些实际项目中的应用场景：

1. 判断一个字符串中是否包含某个字符。

let string = "hello world";
let character = "o";
if (string.split("").includes(character)) {
  console.log("The string contains the character");
}

1. 筛选出一个数组中符合条件的元素。

let arr = [1, 2, 3, 4, 5];
let biggerThanThree = arr.filter(item => item > 3 && arr.includes(item));
console.log(biggerThanThree); // [4, 5]

1. 判断一个用户是否有某个权限。

let user = {
  name: "Alice",
  roles: ["admin", "editor"]
};
let canEdit = user.roles.includes("editor");
if (canEdit) {
  console.log("The user can edit the content");
}

总结

ES7 中的 Array.prototype.includes 方法提供了一种快速判断数组中是否包含指定元素的方式，可以避免使用 indexOf 等方法时的一些问题。该方法具有简洁、直观、高效等优点，可以在实际项目开发中提高开发效率。需要注意，ES7 兼容性不是很好，如果在旧版浏览器中使用该方法，需要进行兼容处理。

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