如何使用 ECMAScript 2017 的 Array.prototype.includes() 方法实现 JavaScript 中数组的元素包含判断-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017 中新增加了一个 Array.prototype.includes() 方法，该方法可以用于判断 JavaScript 数组中是否包含某个元素。相比于传统的 indexOf() 方法，Array.prototype.includes() 方法更加直观和易用。本文将详细介绍 Array.prototype.includes() 方法的使用方法，并提供示例代码和实际应用场景。

Array.prototype.includes() 方法的基本用法

Array.prototype.includes() 方法接收一个参数，该参数为需要在数组中查找的元素值。如果数组中包含该元素，则返回 true，否则返回 false。下面是方法的基本语法：

array.includes(valueToFind[, fromIndex])

其中，valueToFind 为需要查找的元素值，fromIndex 为可选参数，表示开始查找的索引位置。如果省略 fromIndex，则从索引位置 0 开始查找。

以下是一个简单的示例代码：

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

Array.prototype.includes() 方法的高级用法

除了基本用法外，Array.prototype.includes() 方法还有一些高级用法，能够更加灵活地判断数组中的元素是否包含某个值。

多值匹配

Array.prototype.includes() 方法不仅可以用于单个值的匹配，还可以用于多个值的匹配。如果数组中包含多个给定的值，则返回 true，否则返回 false。

以下是一个示例代码：

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

使用箭头函数扩展判断条件

有时候，我们需要根据元素的某些属性或条件来判断数组中是否包含该元素。可以使用箭头函数扩展判断条件，然后将该函数传递给 Array.prototype.includes() 方法进行判断。

以下是一个示例代码：

const arr = [
  { name: 'apple', price: 1 },
  { name: 'banana', price: 2 },
  { name: 'orange', price: 3 }
];
console.log(arr.includes((item) => item.price === 2)); // true
console.log(arr.includes((item) => item.price === 5)); // false

从数组的指定位置开始查找

除了基本用法中的 fromIndex 参数外，Array.prototype.includes() 方法还可以从数组的指定位置开始查找元素。可以使用 slice() 方法获取一个新的数组，然后在新数组上执行 Array.prototype.includes() 方法。

以下是一个示例代码：

const arr = ['apple', 'banana', 'orange', 'banana'];
console.log(arr.includes('banana', 2)); // true
console.log(arr.slice(2).includes('banana')); // true

实际应用场景

Array.prototype.includes() 方法可以广泛应用于实际开发中，以下是一些常见的应用场景：

判断数组中是否包含某个元素，比如用于表单验证等场景。
判断用户是否有权限访问某些内容，比如根据用户角色判断用户是否有访问权限。
过滤数组中满足某个条件的元素，比如过滤商品列表中价格高于某个阈值的商品。

总结

本文详细介绍了 ECMAScript 2017 中新增加的 Array.prototype.includes() 方法的基本用法和高级用法，包括多值匹配、使用箭头函数扩展判断条件以及从数组的指定位置开始查找等。该方法简化了数组元素包含判断的操作，可广泛应用于实际开发中。希望本文能够对读者有所帮助，谢谢！

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