ES7 的 Array.prototype.includes 方法与 indexOf 方法的区别分析

ES7 的 Array.prototype.includes 方法与 indexOf 方法的区别分析

在前端开发中,我们经常需要操作数组。在 JavaScript 中,数组是一种非常常用的数据类型。ES6 中新增了许多对数组的操作方法,如添加了 Array.isArray、Array.from、Array.of、Array.copyWithin 等方法。ES7 在 ES6 的基础上新增了 Array.prototype.includes 方法,它与 indexOf 方法非常相似,但也有些不同。

Array.prototype.includes 方法用于判断数组是否包含指定的值,返回值为布尔型。它的语法如下:

---------------------------- -----------

其中,valueToFind 是要查找的值,fromIndex 是可选参数,表示从哪个索引开始查找,默认值为 0。

indexOf 方法也是用于查找数组中的值,返回值为查找到的元素在数组中的索引。它的语法如下:

----------------------------- -----------

其中,searchElement 是要查找的值,fromIndex 是可选参数,表示从哪个索引开始查找,默认值为 0。

虽然两个方法都可以用于查找数组中的元素,但是它们之间还是有一些区别的。

  1. 参数不同

两个方法接收的参数是不同的。includes 方法只接收一个值参数,而 indexOf 方法需要接收需要查找的值以及可选的起始索引位置。

  1. 返回值不同

两个方法的返回值也是不同的。includes 方法返回一个布尔值:如果数组中存在与指定值相等的元素,则返回 true,否则返回 false;而 indexOf 方法返回元素的索引,如果找不到则返回 -1。

  1. 数据类型的处理不同

两个方法处理数据类型的方式也是不同的。includes 方法判断数组中是否包含指定的值时,会将值转换为原始类型,然后使用严格相等运算符(===)进行比较;而 indexOf 方法在比较值时不会将值转换为原始类型,直接进行比较。

下面是一个使用 includes 方法和 indexOf 方法查找数组中指定元素的示例代码:

----- --- - --- ---- -- ---- ---

-- -- -------- -------
------------------------------- -- ----
----------------------------- -- -----

-- -- ------- -------
------------------------------ -- -
---------------------------- -- --

在实际开发中,我们需要根据具体的场景选择使用 includes 方法还是 indexOf 方法。如果只需要判断数组中是否包含某个值,那么使用 includes 方法会更方便;如果需要获取元素在数组中的索引,那么使用 indexOf 方法会更合适。

总结

两个方法都是用于查找数组中的元素,但是它们的参数、返回值以及数据类型的处理方式都不同,开发者需要根据具体情况选择使用哪个方法。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6501631e95b1f8cacdf1cfc9


猜你喜欢

  • Serverless 应用架构实践指南

    在过去的几年中,Serverless 已经成为了前端开发的一个热门话题。相比于传统的应用架构,Serverless 的优势在于无需管理服务器、支持自动扩展和无缝集成第三方服务等。

    1 年前
  • 从 ES6 到 ES5:使用 Babel 来实现 ES6 代码的转换

    从 ES6 到 ES5:使用 Babel 来实现 ES6 代码的转换 随着前端开发的发展,JavaScript 的语言规范也在不断的升级。ES6 作为一个重要的 JavaScript 语言规范,在其发...

    1 年前
  • Docker 部署 Django 的最佳实践

    什么是 Docker Docker 是一种轻量级的虚拟化技术,可以将应用程序和它的依赖项打包到一个容器中,使得应用程序可以在任何地方运行。Docker 容器可以在几乎任何操作系统上运行,而无需担心依赖...

    1 年前
  • CSS Grid 布局:如何实现子项之间的嵌套关系

    CSS Grid 布局是一种最新、最强大的网格布局方法,它可以允许开发者在一个容器中以网络的形式分布子项。CSS Grid 布局系统是一种相对位置的布局方式,可以在一个容器中实现多层次嵌套关系,使布局...

    1 年前
  • 使用 Headless CMS 和 Nuxt.js 构建 SSR 应用的实践总结

    在现代 Web 开发中,前端框架和技术不断更新,使用新技术和框架可以更好地提高开发效率和网站性能,同时提供更好的用户体验。本文将介绍如何使用 Headless CMS 和 Nuxt.js 构建 SSR...

    1 年前
  • 实用的无障碍数字排版技术分享

    数字是我们生活中随处可见的元素,无论是购物价格、电话号码连铃音、股票价格或者电子邮件中的日期,数字无处不在。为了保证完整性以及易读性,数字的正确排版显得尤为重要。 本文将介绍一些实用的无障碍数字排版技...

    1 年前
  • GraphQL 中如何实现批量操作?

    GraphQL 是一种 API 查询语言和执行环境,它可以帮助我们更高效地构建 Web 应用程序的 API 接口,同时也提供了丰富的数据查询和操作功能。在 GraphQL 中,批量操作是一种常见的数据...

    1 年前
  • 使用 ES7 中的 Array.prototype.includes 方法来检查数组中是否包含特定元素

    在前端开发中,经常需要对数组进行操作。而有时候需要判断一个数组是否包含特定的元素。在 ES7 中,新增的 Array.prototype.includes 方法提供了一种简单而有效的方式来检查数组是否...

    1 年前
  • Cypress 测试:如何使用 import 和 export 进行自定义?

    导语 在前端自动化测试中,Cypress 已经成为了一种非常流行的解决方案。Cypress 的主要特点是易于使用和高效。然而,它并不是完全的一切皆可自由搭配,其默认提供的 API也不一定满足所有的需求...

    1 年前
  • Hapi 框架的 API 文档自动生成技巧

    Hapi 是 Node.js 的一种 Web 框架,它提供了一系列的 API 用于快速构建可扩展的应用程序。其中,自动生成 API 文档是 Hapi 框架一个非常有用的功能。

    1 年前
  • CSS Flexbox:如何使用 flex-grow 属性控制元素的放大比例?

    什么是 Flexbox? Flexbox 是 CSS3 引入的一种新的布局模式,可以方便地实现弹性盒子布局。它可以让我们更轻松地控制容器内元素的排列方式、对齐方式、排序方式等等,适用于响应式布局。

    1 年前
  • ECMAScript 2021 (ES12) 中新的语法特性总结

    ECMAScript 2021,也称 ES12,是 JavaScript 语言的最新版本。本文将带您了解 ES12 中的新的语法特性并提供相应的代码示例。 1. 数字分隔符 在 ES12 中,我们可以...

    1 年前
  • Deno 中 Socket 编程基础介绍

    前言 Deno 是一款新兴的 JavaScript 运行时,它的特点是具有安全性和可维护性,同时也支持实现网络编程中的 Socket 编程。本篇文章就是围绕 Deno 中 Socket 编程基础进行介...

    1 年前
  • Koa 与 Nginx 配置实战

    随着前端技术的不断发展,越来越多的开发者开始使用 Koa 和 Nginx 来搭建前端应用。Koa 是一个新型的 Web 应用程序框架,被广泛应用于 Node.js 上;而 Nginx 是一个高性能的 ...

    1 年前
  • SASS 实现 BEM 命名规范的技巧

    SASS 实现 BEM 命名规范的技巧 前言 在前端开发中,HTML 和 CSS 是不可分割的一对。而 BEM(BEM 块、元素和修饰符) 命名规范则是一种流行的 HTML/CSS 命名约定。

    1 年前
  • ECMAScript 2017 之对象属性操作小技巧

    本文将介绍 ECMAScript 2017 中的对象属性操作小技巧,以便于前端开发人员更好地利用这些特性来提高代码质量,性能和可维护性。以下是本文的主要内容: Object.entries() 方法...

    1 年前
  • ESLint 未识别 JSX 语法导致的问题解决方法

    前端开发离不开代码检查工具,这些工具可以帮助我们减少代码中的错误,增加代码的可读性和可维护性。ESLint 是其中一款经典的代码检查工具,但在使用 ESLint 检查 React 项目时,我们可能遇到...

    1 年前
  • 如何使用 Headless CMS 构建高效的 CMS 系统

    随着互联网技术的快速发展,企业对于CMS系统的要求不断提高。传统的CMS系统虽然功能强大,但是开发难度大,维护困难。而Headless CMS(无头CMS)作为新型的CMS解决方案,却能够满足企业对于...

    1 年前
  • Jest 测试框架:在使用 Promise 时需要注意的问题

    在编写前端程序时,使用 Promise 可以提高代码的可读性和可维护性。而在使用 Jest 测试框架进行测试时,也需要注意 Promise 相关的问题,否则可能会出现一些奇怪的测试结果。

    1 年前
  • Serverless API Gateway 如何进行接口的异常处理

    在 Serverless 架构中,API Gateway 扮演着非常关键的角色。它是用户和 Lambda 等后端服务之间的中间层,负责接收用户的请求,将请求路由到对应的后端服务,并返回响应给用户。

    1 年前

相关推荐

    暂无文章