随着 ES7 的发布，JavaScript 又添加了两个新的方法：Array.prototype.includes 和 Set.prototype.has，它们都可以用来判断某个值是否存在于数组或集合中。虽然这两个方法看似很相似，但它们确有些微妙的不同点。在本篇文章中，我们将深入探讨 Array.prototype.includes 和 Set.prototype.has 的区别，并给出用法示例和指导意义。
Array.prototype.includes
Array.prototype.includes 方法是 ES7 中新增的方法，用于判断数组中是否存在某个元素。它会返回一个布尔值，表示查询结果。Array.includes 接收一个参数，即要查询的元素，如果这个元素在数组中存在，则返回 true，否则返回 false。
用法示例：
const arr = [1, 2, 3]; console.log(arr.includes(1)); // true console.log(arr.includes(4)); // false
Array.prototype.includes 方法有以下几个特点：
- 它是一个数组方法，只能用于数组，并且不会对原数组产生影响。
- 它只能用于判断基本类型值。如果要判断对象、数组、函数等复杂类型值，需要配合其他方法使用。
Set.prototype.has
Set.prototype.has 方法是 ES6 中新增的方法，用于判断集合中是否存在某个元素。它会返回一个布尔值，表示查询结果。Set.has 接收一个参数，即要查询的元素，如果这个元素在集合中存在，则返回 true，否则返回 false。
用法示例：
const set = new Set([1, 2, 3]); console.log(set.has(1)); // true console.log(set.has(4)); // false
Set.prototype.has 方法有以下几个特点：
- 它是一个集合方法，只能用于集合，并且不会对原集合产生影响。
- 它可以用于判断任意类型值，包括基本类型值和复杂类型值。
- 集合中的元素是不重复的，所以如果集合中已经存在一个元素，再添加同样的元素是不会生效的。
区别与灵活使用
通过以上两个方法的区别可以总结出以下几点：
- Array.prototype.includes 只能用于判断数组的基本类型值是否存在，而 Set.prototype.has 可以用于判断集合中任意类型值是否存在，更加灵活。
- Set.prototype.has 可以用于判断对象、数组、函数等复杂类型值，而 Array.prototype.includes 无法判断这些值。
- 使用 Set.prototype.has 可以避免重复添加重复的元素，对于需要去重的场景非常方便。
所以，在实际使用中，我们可以根据需求选择不同的方法。如果只需要判断一个数组中的基本类型值是否存在，那么可以使用 Array.prototype.includes；如果需要对一个集合进行去重、判断任意类型值是否存在，那么可以使用 Set.prototype.has。
下面是一个示例代码，演示了如何灵活使用 Set.prototype.has 方法来判断数组中任意类型值的重复情况：
const arr = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'foo' }];
const set = new Set();
const result = [];
arr.forEach(item => {
if (!set.has(item.name)) {
set.add(item.name);
result.push(item);
}
});
console.log(result); // [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]这段代码会根据每个对象的 name 属性来判断数组中是否存在相同的元素，如果存在就只保留一个。借助 Set.prototype.has 方法，我们可以方便地完成去重操作。
总结
Array.prototype.includes 和 Set.prototype.has 都是用来进行元素存在性判断的方法，但从本质上来讲，二者是不同的。Array.prototype.includes 方法只能用于数组，并只能判断基本类型值是否存在，而 Set.prototype.has 方法可以用于集合，并且可以判断任意类型值是否存在，并且还有去重功能。在实际使用中，需要根据需求来选择使用不同的方法，才能更好地发挥它们的作用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b8b4a8add4f0e0ff1492df