ES6 includes方法是JavaScript语言新增的一种数组方法，它被用于检测一个数组是否包含一个指定的元素，返回一个布尔值。本文将从多个方面介绍ES6 includes方法，包括语法、参数、返回值、应用场景等。
一、ES6 includes方法语法
ES6 includes方法的语法十分简单，仅需使用数组对象后直接调用，并传入需要查找的元素即可。
arr.includes(searchElement[, fromIndex])
其中，searchElement为需要查找的元素，fromIndex可选，表示从哪个索引开始查找。如果省略则默认从数组开头查找。
二、ES6 includes方法参数解析
arr.includes(searchElement[, fromIndex])方法中可传入两个参数，分别为需要查找的元素和查找的起始索引。
1. searchElement（必填）
表示需要查找的元素，可以是任何类型的数据：字符串、数值、对象或者其他。
如果需要查找的元素不同于数组中的元素，本方法会返回false。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(0)); //false，不存在元素0
该方法的查找规则比较严格，其处理方式与全等（===）相似，不会自动转换数据类型。因此，如果需要查找的元素与数组元素不是同类型，也会返回false。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes("2")); //false，"2"为字符串类型，不等同于2
2. fromIndex（可选）
表示查找的起始位置，如果不指定该参数，则默认从数组的第一个元素开始查找。该参数为单个有效的整数值。
如果传入一个不是数字的值，该参数会自动转换为数字。
“`js
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, “2”)); //true， “2” 默认转换为数字 2
“`
如果传入的起始位置参数为负值，则从数组末尾开始计数。例如，-1指的是数组最后一个元素。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, -1)); //false，从数组的最后一个元素开始查找
三、ES6 includes方法返回值
ES6 includes方法返回一个布尔类型的值，表明数组中是否包含被查找的元素。
如果数组中找到了被查找的元素，则返回true，反之则返回false。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); //true
四、ES6 includes方法与indexOf方法的区别
ES6 includes方法与原有的indexOf方法在功能上有些类似，都是返回一个布尔类型值，判断一个元素是否存在于数组之中。但它们也存在着显著的区别。
1、ES6 includes方法比indexOf方法更为简洁，代码可读性更高。
2、ES6 includes方法可以查找NaN元素的位置，且不需要额外的处理。
“`js
const arr = [1, 2, 3, NaN];
console.log(arr.includes(NaN)); //true
“`
使用indexOf方法需要进行额外的判断。
“`js
const arr = [1, 2, 3, NaN];
console.log(arr.indexOf(NaN) !== -1); //true
“`
3、ES6 includes方法的查找范围不包含起始位置 等价于arr.indexOf(searchElement, fromIndex) !== -1)。
最后，需要注意ES6 includes方法与indexOf方法，会出现错误的情况是，当搜索的值是数组中某个带有原型属性的对象时，ES6 includes方法并没有顺着原型链进行查找，而indexOf方法则会。
五、ES6 includes方法的应用场景
ES6 includes方法主要用于判断数组中是否含有某个元素，其在实际开发中很有用，尤其是处理一个数组需要找某个元素时。下面介绍一些更具体的应用场景。
1、判断一个数组是否包含某些元素
ES6 includes方法可以判断一个数组是否包含某些元素。我们不需要使用for循环遍历数组，只需使用 includes方法即可轻松实现。
“`js
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
“`
2、过滤数组中的特定元素
使用ES6 includes方法可以轻松过滤掉数组中的某些元素。
“`js
const arr = [1, 2, 3, 4, 5];
const evenArr = arr.filter(num => !arr.includes(num % 2 !== 0));
console.log(evenArr); //[2, 4]
“`
上述代码中，过滤掉arr中不是偶数的元素，返回仅包含偶数的新数组。
3、验证用户的输入
ES6 includes方法可用于验证用户输入的值是否符合规定的格式，增强前端验证用户输入的表单。
“`html
const userEmail = document.getElementById(“userEmail”);
const submitBtn = document.getElementById(“submitBtn”);
submitBtn.addEventListener(“click”, event => {
event.preventDefault();
if (!userEmail.value.includes(“@”)) {
alert(“请输入正确的邮箱地址”);
} else {
alert(“表单提交成功”);
//…表单提交后续逻辑
}
});
“`
上述代码中，使用ES6 includes方法验证用户输入的邮箱地址，如果不符合规则，则提示用户重新输入。
六、ES6 includes方法总结
ES6 includes方法是一个实用的数组方法，可以更方便、快捷地判断一个元素是否在数组中，扩展了JavaScript的数组功能，并且代码可读性更高。在实际开发中，可以应用于验证用户输入、过滤数组中的特定元素等场景。
需要注意的是，ES6 includes方法的查找规则与全等（===）相似，不会自动转换数据类型，所以如果需要查找的元素与数组元素不是同类型，也会返回false。 在处理查找范围和查找方式上与indexOf方法也有所不同，需要根据具体的业务场景进行选择。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/280326.html
微信扫一扫 
支付宝扫一扫 