您的位置:

ES6 includes方法完全指南

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
<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方法也有所不同,需要根据具体的业务场景进行选择。

ES6 includes方法完全指南

2023-05-19
印象笔记记录java学习(Java成长笔记)

2022-11-12
java方法整理笔记(java总结)

2022-11-08
JS中includes的多方面阐述

2023-05-20
java学习的一些基础笔记(java初学笔记)

2022-11-14
java学习笔记(java初学笔记)

2022-11-14
达内web前端js笔记(达内jsd)

本文目录一览: 1、web前端里的js技术 2、《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结 3、达内web前端开发讲的什么内容 4、2020年自学Web前端要掌握的知识点有哪些

2023-12-08
java笔记,大学java笔记

2022-11-28
数组includes方法详解

2023-05-18
java笔记,尚硅谷java笔记

2022-12-01
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
Vue删除数组某一项完整指南

2023-05-19
c语言考试是不是全部都笔试,c语言考试是不是全部都笔试

2022-11-28
使用ES6判断数组是否包含某个元素

2023-05-23
python基础学习整理笔记,Python课堂笔记

2022-11-21
java客户端学习笔记(java开发笔记)

2022-11-14
发篇java复习笔记(java课程笔记)

2022-11-09
数据库的笔记mysql,数据库管理系统笔记

2022-11-24
python课堂整理32(python笔记全)

2022-11-12
重学java笔记,java笔记总结

2022-11-23