一、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 <script> const userEmail = document.getElementById("userEmail"); const submitBtn = document.getElementById("submitBtn"); submitBtn.addEventListener("click", event => { event.preventDefault(); if (!userEmail.value.includes("@")) { alert("请输入正确的邮箱地址"); } else { alert("表单提交成功"); //...表单提交后续逻辑 } }); </script> ```上述代码中,使用ES6 includes方法验证用户输入的邮箱地址,如果不符合规则,则提示用户重新输入。
六、ES6 includes方法总结
ES6 includes方法是一个实用的数组方法,可以更方便、快捷地判断一个元素是否在数组中,扩展了JavaScript的数组功能,并且代码可读性更高。在实际开发中,可以应用于验证用户输入、过滤数组中的特定元素等场景。
需要注意的是,ES6 includes方法的查找规则与全等(===)相似,不会自动转换数据类型,所以如果需要查找的元素与数组元素不是同类型,也会返回false。 在处理查找范围和查找方式上与indexOf方法也有所不同,需要根据具体的业务场景进行选择。