告别繁琐！ES6 Array.includes()：轻松查找数组元素

2023-12-11 05:58:21

ES6 带来了许多强大的数组扩展方法，其中 Array.includes() 脱颖而出，成为查找数组元素的利器。告别传统循环和 indexOf() 的繁琐，Array.includes() 以其简洁高效，为 JavaScript 开发者带来了极大的便利。

Array.includes() 简介

Array.includes() 方法用于确定一个给定的值是否出现在数组中。与传统的 indexOf() 方法相比，Array.includes() 更为简洁直观，它直接返回一个布尔值，表示该值是否存在于数组中。

语法：

array.includes(searchElement, fromIndex)

其中：

array：目标数组
searchElement：要查找的值
fromIndex（可选）：从数组的指定索引开始搜索（默认为 0）

Array.includes() 的优势

Array.includes() 具有以下优势：

简洁性： 与使用 indexOf() 和 === 运算符相比，Array.includes() 更为简洁，仅需一行代码即可完成查找。
可读性： Array.includes() 的语义非常清晰，只需看一眼就能理解其含义。
效率： 对于较小的数组，Array.includes() 的效率与 indexOf() 相当，甚至略胜一筹。

Array.includes() 的用法

使用 Array.includes() 查找数组元素非常简单：

const fruits = ['apple', 'banana', 'orange'];

// 查找 apple 是否存在于 fruits 数组中
const result = fruits.includes('apple');

// 输出结果
console.log(result); // true

fromIndex 参数

fromIndex 参数允许我们从数组的指定索引开始搜索。例如：

const fruits = ['apple', 'banana', 'orange', 'apple'];

// 从索引 2 开始查找 apple
const result = fruits.includes('apple', 2);

// 输出结果
console.log(result); // true

与 indexOf() 的比较

Array.includes() 与 indexOf() 都是查找数组元素的方法，但两者之间存在一些关键差异：

返回值： Array.includes() 返回一个布尔值，而 indexOf() 返回元素的索引（如果找到）或 -1（如果未找到）。
搜索起始位置： Array.includes() 默认从数组开头开始搜索，而 indexOf() 从指定的索引开始搜索。
效率： 对于较小的数组，Array.includes() 的效率与 indexOf() 相当，甚至略胜一筹。但对于大型数组，indexOf() 的效率可能会更高，因为它可以利用二分查找算法。

实例：

检查用户输入是否有效

const validInputs = ['name', 'email', 'password'];

// 检查用户输入是否有效
const input = 'email';
if (validInputs.includes(input)) {
  // 输入有效
} else {
  // 输入无效
}

从购物车中查找产品

const shoppingCart = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
];

// 查找购物车中是否存在名为 Banana 的产品
const product = shoppingCart.find(item => item.name === 'Banana');

// 检查产品是否存在
if (product) {
  // 产品存在
} else {
  // 产品不存在
}