ES7 提供 Array.includes 方法的实践方法
在前端开发中,数组是一种非常重要的数据结构。而 ES7 中的 Array.includes 方法为我们提供了一种更加方便和快捷的方式来判断数组中是否包含某个元素。本文将详细介绍 Array.includes 方法的实践方法,并给出一些示例代码。
一、Array.includes 方法的基本使用
Array.includes 方法可以在数组中寻找指定元素,并返回一个布尔值,表示是否找到了该元素。它的基本调用方法如下:
let arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // true console.log(arr.includes(6)); // false
上述代码中,我们定义了一个数组 arr,并使用 Array.includes 方法来寻找元素 3 和元素 6。对于元素 3,返回值为 true,说明数组中包含该元素;对于元素 6,返回值为 false,说明数组中不包含该元素。
二、包含 NaN 的数组判断
在 JavaScript 中,NaN 是一种非常特殊的数据类型,它表示 Not a Number,即不是数字。在判断数组中是否包含 NaN 时,我们需要注意一些细节。
在 ES6 中,我们可以使用 Array.indexOf 方法来寻找数组中的 NaN。但该方法有一个缺陷,即 indexOf 方法在查找时会使用强制相等运算符来比较元素是否相等,而 NaN 和其他任何值都不相等,包括自身。因此,indexOf 方法无法精确判断数组中是否包含 NaN。
但在 ES7 中,Array.includes 方法使用的是 SameValueZero 比较算法,该算法可以正确地判断数组中是否包含 NaN。因此,我们可以抛弃 indexOf 方法,改用 includes 方法来判断数组中是否包含 NaN。
let arr = [1, 2, NaN]; console.log(arr.indexOf(NaN)); // -1 console.log(arr.includes(NaN)); // true
上述代码中,我们定义了一个包含 NaN 的数组 arr,并分别使用 indexOf 方法和 includes 方法来寻找该元素。结果显示,indexOf 方法返回 -1,说明数组中不包含 NaN;而 includes 方法返回 true,说明数组中包含 NaN。
三、关于 includes 方法的参数用法
Array.includes 方法的参数可以有两种用法。第一种用法是传入一个元素,表示寻找该元素是否在数组中;第二种用法是传入两个参数,第二个参数表示从数组的指定位置开始寻找元素。下面是一些示例代码:
let arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3, 2)); // true,从数组下标 2 开始寻找元素 3 console.log(arr.includes(3, 3)); // false,从数组下标 3 开始并不包含元素 3
四、针对数组中对象的使用
在实际项目中,我们经常需要在数组中查找某个对象是否存在。在这种情况下,我们需要注意一些细节。如下面的示例代码所示:
let person1 = { name: "Alice" }; let person2 = { name: "Bob" }; let arr = [person1, person2]; console.log(arr.includes(person1)); // true console.log(arr.includes({ name: "Alice" })); // false
上述代码中,我们定义了两个对象 person1 和 person2,并将它们存放在数组 arr 中。然后,我们使用 includes 方法来寻找两个元素:person1 和一个新对象,该对象也包含一个 name 属性,值为 Alice。结果显示,寻找 person1 返回 true,但寻找新对象返回 false。这是因为 includes 方法使用的是 SameValueZero 算法,需要我们传入元素的引用才能判断是否相等。
因此,如果我们需要判断数组中是否包含某个对象,需要先获取该对象的引用,然后再传入 includes 方法中。如下面的代码所示:
let person1 = { name: "Alice" }; let person2 = { name: "Bob" }; let arr = [person1, person2]; console.log(arr.includes(person1)); // true let obj = { name: "Alice" }; console.log(arr.includes(Object.assign({}, obj))); // true,先复制 obj 再判断
上述代码中,我们先定义了两个对象和一个数组,并使用 includes 方法来寻找数组中的元素。然后,我们定义了一个新的对象 obj,并使用 Object.assign 方法来复制该对象。最后,我们使用 includes 方法来寻找该对象,返回值为 true,说明数组中包含该对象。
结论
Array.includes 方法是 ES7 中提供的一个非常简洁和方便的方法,它可以快速地判断一个数组中是否包含某个元素。通过本文的介绍,希望可以帮助读者更好地掌握 Array.includes 方法的使用方法,在实际项目中更加便捷地进行数组操作。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6708b8d9d91dce0dc873d87d