如何使用 ES9 中新增的 Array.prototype.includes() 方法快速判断元素是否在数组中

ES9是ECMAScript 2018发布的一个版本，在这个版本中，我们很幸运地看到了Array.prototype.includes()这个新方法。它可以帮助我们快速地判断一个元素是否在数组中。本文将会详细讲述如何使用这个新方法，并提供一些示例代码给读者参考。

ES9 新增的 Array.prototype.includes() 方法

在之前的版本中，我们只能使用Array.prototype.indexOf()方法来判断一个元素是否存在于数组中。这个方法的返回值为元素在数组中的索引。当元素不存在数组中时，返回值为-1。这种做法虽然可行，但是经常需要额外的代码才能处理它所返回的负数值。ES9新增的Array.prototype.includes()方法可以通过返回一个布尔值来简化这个过程。

使用Array.prototype.includes()方法，只需要传入要查找的元素，它就会返回一个布尔值 true 或 false ，表示元素是否存在于数组中。

const arr = [1, 2, 3, 4];
console.log(arr.includes(3)); // true
console.log(arr.includes(5)); // false

示例代码

下面是一些示例代码，帮助你更好地理解在不同情况下如何使用Array.prototype.includes()方法。

1. 检查一个元素是否存在于数组中

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

const hasGrape = arr.includes('grape');
console.log(hasGrape); // false

2. 检查一个数组是否包含另一个数组

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 3];
const isIncluded = arr2.every((val) => arr1.includes(val));
console.log(isIncluded); // true

3. 使用 includes() 和解构来检查对象是否存在于数组中

const users = [
  { name: 'John', age: 21 },
  { name: 'Lucy', age: 31 },
  { name: 'Jack', age: 45 }
];

const [john, lucy, jack] = users;
console.log(users.includes(john)); // true
console.log(users.includes({ name: 'John', age: 21 })); // false

总结

ES9中新增的Array.prototype.includes()方法是一个非常便利的方法，它可以帮助我们快速地判断一个元素是否存在于数组中。需要注意的是，在使用includes()时，如果需要用它来检查引用类型数据，需要留意引用是否相等，因为includes()只会比较元素的值，而不会比较引用类型数据的指针是否相等，这个在第三个示例中也提到了。对于经常需要判断元素是否在数组中的场景，使用includes()方法可以使代码更简洁且易于维护。

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