ES10 中的 Array.prototype.includes() 方法

在 ES6 中,JavaScript 引入了一些新的数组方法,如 Array.prototype.find()Array.prototype.findIndex()。而在 ES7 中,又新增了一个 Array.prototype.includes() 方法,它可以用来判断一个数组是否包含某个元素。在 ES10 中,该方法得到了进一步的扩展和优化,本文将详细介绍该方法的使用技巧。

基本用法

Array.prototype.includes() 方法用于判断一个数组是否包含某个元素,其基本语法如下:

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

其中,searchElement 表示要查找的元素,fromIndex 表示从哪个位置开始查找(可选)。如果数组中存在该元素,则返回 true;否则返回 false

下面是一个简单的示例:

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

fromIndex 参数的使用

fromIndex 参数用于指定查找的起始位置。如果省略该参数,则从数组的第一个元素开始查找。如果指定了该参数,则从指定位置开始查找。

需要注意的是,如果 fromIndex 参数为负数,则表示倒数第几个元素。例如,fromIndex-1 表示从倒数第一个元素开始查找。

下面是一些示例:

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

NaN 的处理

Array.prototype.includes() 方法可以正确处理 NaN 值。也就是说,如果数组中包含 NaN,则返回 true

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

需要注意的是,该方法无法区分 -0+0,它们被视为相等的值。

与 indexOf() 方法的区别

Array.prototype.includes() 方法与 Array.prototype.indexOf() 方法的区别在于,前者可以正确判断数组中是否包含 NaN,而后者无法正确处理 NaN

此外,includes() 方法更加简洁易读,并且不需要进行严格相等的比较,因此代码更加清晰。

下面是一个示例,比较了两种方法的使用:

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

总结

Array.prototype.includes() 方法是 ES7 中新增的数组方法,用于判断一个数组是否包含某个元素。在 ES10 中,该方法得到了进一步的扩展和优化。使用该方法可以更加简洁易读地判断数组中是否包含某个元素,同时可以正确处理 NaN 值。需要注意的是,该方法无法区分 -0+0

希望本文能够帮助读者更好地理解和使用 Array.prototype.includes() 方法。

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


猜你喜欢

  • 初学者如何快速入门 Kubernetes

    Kubernetes(简称 K8s)是一个开源的容器编排系统,用于自动化部署、扩展和管理容器化的应用程序。作为一名前端工程师,学习 Kubernetes 有助于我们更好地了解如何将前端应用程序部署到云...

    8 个月前
  • 使用 SASS 时如何避免 “Color values must be of equal types” 错误

    在前端开发中,SASS 是一种非常流行的 CSS 预处理器,它提供了许多方便的功能,例如变量、嵌套规则、mixin 等等。然而,在使用 SASS 的过程中,你可能会遇到一个常见的错误:“Color v...

    8 个月前
  • Socket.io 与 Express 框架配合使用详解及实例展示

    Socket.io 是一个基于 Node.js 的实时双向通信库,能够实现实时通讯功能。而 Express 是一个 Node.js 的 web 框架,提供了简单的路由、中间件等功能。

    8 个月前
  • React Native 的动画系统实践指南

    React Native 是一种用于构建原生应用的框架,它允许开发者使用 JavaScript 和 React 语言来构建移动应用程序。其中,动画系统是 React Native 中非常重要的一部分。

    8 个月前
  • Tailwind 实现背景图片和字体的覆盖效果

    Tailwind 是一款流行的 CSS 框架,可以快速构建出美观的用户界面。在这篇文章中,我们将介绍如何使用 Tailwind 实现背景图片和字体的覆盖效果。 背景图片的覆盖效果 当我们需要在网页上添...

    8 个月前
  • 响应式设计中如何使用 REM 实现自适应字体大小

    在响应式设计中,自适应字体大小是非常重要的一部分。它可以让页面的字体大小在不同的设备上自动适配,从而提高用户体验。在本文中,我们将介绍如何使用 REM 实现自适应字体大小。

    8 个月前
  • Angular7 应用中使用 ckeditor 实现富文本编辑器

    前言 在现代 Web 应用中,富文本编辑器已经成为一个必不可少的组件。它们可以用于编辑博客文章、邮件、社交媒体帖子等等。而 ckeditor 是一个功能强大、易于使用的富文本编辑器,它支持各种格式的文...

    8 个月前
  • Angular CLI 构建单页应用(SPA)- 详细教程

    Angular 是一个非常流行的前端框架,它可以帮助我们构建单页应用(SPA)。而 Angular CLI 是一个构建 Angular 应用的命令行工具,它可以帮助我们快速创建、开发和构建 Angul...

    8 个月前
  • webpack4 构建 Vue+TypeScript 项目

    前言:本文主要介绍如何使用 webpack4 构建 Vue+TypeScript 项目。 什么是 webpack webpack 是一个模块打包工具,它可以将多个模块打包成一个文件,使得前端项目可以更...

    8 个月前
  • Material Design 的 RecyclerView 学习笔记

    什么是 RecyclerView RecyclerView 是一个可以高效展示大量数据列表的 Android 组件,它是 ListView 和 GridView 的升级版。

    8 个月前
  • Koa1 中间件的写法

    Koa 是一个基于 Node.js 的 web 框架,它的设计理念是中间件。中间件是 Koa 的核心概念,它允许开发者通过组合多个中间件来处理 HTTP 请求和响应。

    8 个月前
  • PWA 技术:如何解决应用在 Android 设备上的兼容性问题

    前言 PWA(Progressive Web Apps)是一种新型的应用程序开发技术,它可以让 Web 应用程序在移动设备上实现类似原生应用的体验。PWA 技术的出现,解决了 Web 应用程序在移动设...

    8 个月前
  • 使用 Babel 编译 ES6 模块时遇到的 Symbol 问题及解决方案

    前言 随着 ES6 的普及,越来越多的前端项目开始使用 ES6 模块语法,而 Babel 作为 ES6 代码编译器,也成为了前端开发中不可或缺的工具之一。但是,在使用 Babel 编译 ES6 模块时...

    8 个月前
  • ES6 中的模块化开发和 CommonJS 模块的兼容性问题解决方案

    在前端开发中,模块化开发已经成为了一个非常重要的概念。ES6 中的模块化开发已经成为了前端开发的标准,但是在实际开发中,我们还需要考虑与 CommonJS 模块的兼容性问题。

    8 个月前
  • Jest 单元测试中如何 Mock 掉 window 对象?

    在前端开发中,我们经常需要使用 window 对象来访问浏览器的 API。然而,在进行单元测试时,我们需要模拟这些 API,以确保代码的正确性和可靠性。但是,如何在 Jest 单元测试中 Mock 掉...

    8 个月前
  • 如何在 ECMAScript 2021 (ES12) 中使用 Map 和 WeakMap

    在 JavaScript 中,Map 和 WeakMap 都是非常有用的数据结构。它们可以帮助我们更方便地存储和访问数据,以及更有效地管理内存。在 ECMAScript 2021 (ES12) 中,M...

    8 个月前
  • RxJS 中使用 catchError 操作符处理异常

    RxJS 是一个强大的 JavaScript 库,它可以让我们更容易地处理异步数据流。在处理异步数据时,异常是不可避免的。RxJS 提供了许多操作符来处理异常,其中 catchError 操作符是最常...

    8 个月前
  • ES8 中引入的 async 函数:快速、高效地编写异步代码

    在前端开发中,异步编程是非常常见的。在过去,我们可能使用回调函数或者 Promise 来解决异步编程的问题。但是这些方法都有一些缺点,比如回调地狱和 Promise 的 then() 方法嵌套过多。

    8 个月前
  • 解决 Deno 应用遇到的文件读写路径问题

    Deno 是一个安全、现代化的 JavaScript 和 TypeScript 运行时环境,它提供了很多有用的 API,包括文件读写、网络请求等等。在使用 Deno 进行应用开发时,我们经常会遇到文件...

    8 个月前
  • Redux 实战:打造一个购物车组件

    在前端开发中,我们经常需要实现购物车功能,这里我们将介绍如何使用 Redux 打造一个购物车组件。 Redux 简介 Redux 是一种状态管理库,它可以帮助我们管理应用的状态。

    8 个月前

相关推荐

    暂无文章