利用 ES7 的 Array.prototype.includes 方法实现数组查找
什么是 Array.prototype.includes 方法?
Array.prototype.includes 方法是 ES7 中新增的一种方法,它可以判断一个数组是否包含一个特定的值,并返回布尔值。该方法接受两个参数,第一个参数表示要查找的值,第二个参数表示从哪个位置开始查找(可选参数,不传将从数组第一个位置开始查找)。如果数组中存在该值,则返回 true,否则返回 false。
下面是使用 includes 方法的示例代码:
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // 输出 true console.log(arr.includes(6)); // 输出 false console.log(arr.includes(3, 2)); // 输出 false,因为从第二个位置开始查找,3 的索引是 2,而不是 3。
Array.prototype.includes 方法的好处
在以前的版本中,我们通常使用 Array.prototype.indexOf 方法来查找数组中是否包含特定的值。但是,该方法有以下几个缺点:
- indexOf 方法返回的索引值可能会误导我们判断是否存在该值,因为该方法返回的是第一次出现该值的位置,如果该值存在多次,我们可能需要写更多的代码来确定该值是否存在。
- indexOf 方法不能正确地比较 NaN。例如,
[NaN].indexOf(NaN)
返回 -1,而不是 0,这可能会导致混淆。
相比之下,Array.prototype.includes 方法的用途更清晰,其语义也更易于理解。它会返回一个简单的布尔值,让我们能够更轻松地确定数组中是否存在该值。
实现数组查找
假设我们有一个包含一些用户名字的数组:
const users = ['Jack', 'Henry', 'Mary', 'Bob', 'Josh'];
现在,我们需要使用 includes 方法来查找用户输入的名字是否存在于该数组中,如果存在,则返回该用户名的索引位置,如果不存在,则返回 -1。
-- -------------------- ---- ------- -------- ------------------- - ----- ----- - -------------------- -- --- ------- ------ -- ------ --- --- - ------ ------ - ------------------------ - -- --------- -------- ---- ------ ---------------------- -- ---- --- ------ - ------ --- -
上述函数中,我们首先使用 indexOf 方法来查找该用户名是否存在于数组中,如果存在,则直接返回该用户名的索引位置。如果不存在,则使用 includes 方法来确认该用户名是否存在于数组中,如果存在,则使用 findIndex 方法来查找该用户名的索引位置。
总结
在本文中,我们介绍了 ES7 中新增的 Array.prototype.includes 方法的用法和好处,并提供了使用该方法进行数组查找的示例代码。与早期的 indexOf 方法相比,includes 方法更简单、更易于使用,能够更好地判断数组是否包含特定的值。在编写前端代码时,我们需要了解常见的数组操作方法,以提高编写效率和代码质量。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6490309548841e9894e5c894