在 JavaScript 开发中，数组是一种非常常见的数据类型。为了方便操作数组，我们通常会使用各种方法来搜索、添加或删除数组元素。在 ECMAScript 2016 中引入了 Array.prototype.includes() 方法，可以有效避免一些常见的代码错误，本文将详细介绍如何使用这个方法。
1. 什么是 Array.prototype.includes()？
Array.prototype.includes() 方法用于判断一个数组中是否包含一个指定的值，返回一个布尔值。如果包含，则返回 true，否则返回 false。方法的语法如下：
array.includes(searchElement[, fromIndex])
其中，searchElement 是要搜索的元素，fromIndex 是一个可选参数，表示从哪个位置开始搜索。
2. 为什么使用 Array.prototype.includes()？
在之前的版本中，我们通常使用 indexOf() 方法来判断一个元素是否在数组中。indexOf() 方法会返回要查找的元素在数组中的索引位置，若未找到，则返回 -1。但是，indexOf() 方法在使用时容易犯错，比如：
- 未检查返回值是否等于 -1，从而错误地将 -1 作为索引，导致代码错误；
- 未使用严格相等（===）比较，导致类型不匹配而产生错误。
而 Array.prototype.includes() 方法则非常简单直观，只需要传入要查找的元素，就可以得到一个布尔值。
3. 如何使用 Array.prototype.includes()？
在实际开发中，我们通常会在以下场景下使用 Array.prototype.includes() 方法：
3.1 判断一个数字是否在数组中
const numbers = [1, 2, 3, 4, 5];
if (numbers.includes(3)) {
console.log('3 is in the array');
} else {
console.log('3 is not in the array');
}3.2 判断一个字符串是否在数组中
const fruits = ['apple', 'banana', 'pear'];
if (fruits.includes('banana')) {
console.log('banana is in the array');
} else {
console.log('banana is not in the array');
}3.3 判断一个对象是否在数组中
const books = [{title: 'JavaScript高级程序设计'}, {title: 'CSS揭秘'}, {title: 'HTML5与CSS3基础教程'}];
const book = {title: 'CSS揭秘'};
if (books.includes(book)) {
console.log(`The book ${book.title} is in the array`);
} else {
console.log(`The book ${book.title} is not in the array`);
}3.4 使用 fromIndex 参数
fromIndex 参数表示从哪个位置开始搜索，可以用于查找数组中的重复元素：
const numbers = [1, 2, 3, 4, 5, 3]; console.log(numbers.indexOf(3)); // 输出 2 console.log(numbers.indexOf(3, 3)); // 输出 5 console.log(numbers.includes(3, 3)); // 输出 true
4. 总结
使用 Array.prototype.includes() 方法可以避免一些常见的代码错误，同时也使代码更加简洁明了。使用方法非常简单，适用于各种类型的数据，特别是对象类型数据。因此，在实际开发中，建议使用 Array.prototype.includes() 方法来替代 indexOf() 方法进行元素查找操作，以减少代码错误的发生。
5. 示例代码
// javascriptcn.com 代码示例
// 3.1 判断一个数字是否在数组中
const numbers = [1, 2, 3, 4, 5];
if (numbers.includes(3)) {
console.log('3 is in the array');
} else {
console.log('3 is not in the array');
}
// 3.2 判断一个字符串是否在数组中
const fruits = ['apple', 'banana', 'pear'];
if (fruits.includes('banana')) {
console.log('banana is in the array');
} else {
console.log('banana is not in the array');
}
// 3.3 判断一个对象是否在数组中
const books = [{title: 'JavaScript高级程序设计'}, {title: 'CSS揭秘'}, {title: 'HTML5与CSS3基础教程'}];
const book = {title: 'CSS揭秘'};
if (books.includes(book)) {
console.log(`The book ${book.title} is in the array`);
} else {
console.log(`The book ${book.title} is not in the array`);
}
// 3.4 使用 fromIndex 参数
const numbers = [1, 2, 3, 4, 5, 3];
console.log(numbers.indexOf(3)); // 输出 2
console.log(numbers.indexOf(3, 3)); // 输出 5
console.log(numbers.includes(3, 3)); // 输出 true来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652deae87d4982a6ebf03171