javascript 中搜索数组的四种方法

news2025/1/24 11:48:15

前端经常要通过 javaScript 来处理数组中的数据,其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值,这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。

在 ECMAScript6 之前,最常用的方法就是通过 for 循环来遍历数组中的所有项目并对项目执行操作。现在我们可以通过内置的使用方法来完成在数组中搜索值的常见任务。

本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter 这些方法。

使用 includes()

根据数组中是否存在值,includes() 方法将返回 true 或 false

基本语法:

在这里插入图片描述

第一个参数 valueToFind 是数组中要匹配的值,第二个参数 fromIndex 是可选的,用于设置开始比较的索引,因为默认值为 0,意味着默认搜索整个数组。

请看 alligator facts 的示例数组:

在这里插入图片描述

然后使用 includes() 检查数组中是否存在字符串”thick scales”

在这里插入图片描述

代码返回 true,因为字符串存在于数组中。

如果你添加 fromIndex 参数以便于在”thick scales” 之后进行比较,则将返回 false

在这里插入图片描述

此外,还有一些需要注意的重要事项,这里的.includes() 方法使用严格比较,例如:

在这里插入图片描述

上述代码返回 true,因为数值 80 在数组中。

在这里插入图片描述

上述代码将返回 false,因为字符串值’80’ 不在数组中。

includes() 对于只需要知道值是否存在于数组肿的用例很有帮助

使用 indexOf()

indexOf() 方法返回数组中值的第一个索引,如果没有匹配项,则返回 -1。

基本语法如下:

在这里插入图片描述

回顾 alligator facts 的示例数组:

在这里插入图片描述

使用 indexOf() 返回字符串 “rounded snout” 的第一个索引:

在这里插入图片描述

返回字符串 “rounded snout” 的索引 —3

在这里插入图片描述

上述代码返回 -1,因为该字符串不在数组中。

在这里插入图片描述

以上代码返回 1

在这里插入图片描述

返回 4,因为在索引 2 之后找到该元素,为数组中第四个元素

注意:如果你查找的不是第一个结果,那么或许可以使用 lastIndexOf(),lastIndexOf() 方法与 indexOf() 类似,但将从数组的最后一个索引开始查找第一个匹配项并往回工作。

indexOf 对于需要搜索结果的耽搁索引的用力很有帮助。

使用 find()

find() 方法返回数组中与函数条件匹配的第一个值,如果没有匹配项,则返回 undefined

基本语法如下:

在这里插入图片描述

回顾 alligator facts 的示例数组:

在这里插入图片描述

然后使用 find() 返回长度小于 13 个字符的第一个值:

在这里插入图片描述

此示例仅使用 callback 参数。

80 是一个数值。“rounded snout” 的长度为 13 个字符,“thick scales” 有 12 个字符,而 “4 foot tail” 有 11 个字符 —— 这两者都满足函数条件,但是,find() 只会返回第一个值,即返回 “thick scales”。

以下为使用可选的 index 参数的示例:

在这里插入图片描述

“thick scales”、“4 foot tail” 和 “rounded snout” 都满足第一个条件(typeof el === ‘string’)。如果这是唯一的条件,则返回第一个,即 “thick scales”。但因为有第二个条件(idx === 2),所以最后代码返回 “4 foot tail”。

注意:如果你查找的是索引而不是值,那么可能会倾向于使用 findIndex()。findIndex() 方法也接收函数,但它返回匹配元素的索引而不是元素本身。

find() 对于需要单个搜索结果值的用例很有帮助。

使用 filter()

filter() 方法返回新数组,新数组包含所有与函数条件匹配的值。如果没有匹配项,则返回空数组。

基本语法如下:

在这里插入图片描述

还是 alligator facts 的示例数组:

在这里插入图片描述

然后使用 filter() 返回所有等于 80 的值:

在这里插入图片描述

数组中的两个值 80 都满足条件。因此返回新数组:[80, 80]。

filter() 对于需要多个搜索结果值的用例很有帮助。

总结

数组中的两个

本文重点介绍了 Array.includes()、Array.indexOf()、Array.find() 和 Array.filter。每个都可以为用例需求提供解决方案。

只需要知道值是否存在?这时可以使用 includes()。

需要获取元素本身?可以对单个项目使用 find () 或对多个项目使用 filter()。

需要查找元素的索引?应该使用 indexOf() 搜索原语或使用 findIndex() 搜索函数。

感谢大家的阅读!有不懂的问题可以留言

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址
码云地址:
http://github.crmeb.net/u/defu

Github 地址:
http://github.crmeb.net/u/defu

开源不易,Star 以表尊重,感兴趣的朋友欢迎 Star,提交 PR,一起维护开源项目,造福更多人!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407944.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue中 this.$set的用法

一、this.$set能够实现什么功能 官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue无法探测普通的新增属性 (比如 this.myObject.newProperty …

pdf在线预览 pdf.js的使用

1.官网:https://mozilla.github.io/pdf.js/ 2、使用方法 1) 通过官网,下载pdfJs插件包,放至项目中; window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );2)将下载的pdfJS…

uniapp封装axios?大可不必那么麻烦。

最近群里的一个小明同学问 uniapp可以使用axios请求吗?我当时就一愣 反问为什么要使用axios,是 uni.request 不香了吗? 小明:因为axios可以像vue的项目一样,在request里面封装巴拉巴拉一堆。 我:那uni.re…

微信小程序开发使用onreachBottom实现页面触底加载及分页

目录 一 简要介绍一下onreachBottom事件 二 实例展示 三 遇到的一些问题 一 简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样,都属于小程序的生命周期事件,作用就是在页面下拉到底部时触发这个事件,一般适用于数据比较…

一次跨域的坑Faild to load response data: No resourse with given identifier found

有一个导出接口,前后端都没有动过,之前也测试过没有问题。上到测试环境后,测试环境加了证书,报错了。 先是后端小朋友和我说了这个问题: 浏览器控制台打印信息(聊天记录中那张图):然后我问他操作了哪个页面…

vue3.0教程——搭建Vue脚手架【简化版】

目录 哈喽,大家好丫,你们的小郭子又来啦 ~ 一、环境要求 (1)node安装(前端开发环境) (2)vue-cli脚手架安装 二、安装依赖 (1)使用命令行安装以下依赖 &a…

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一、简单介绍 二、安装和使用 三、效果图 四、vue-seamless-scroll 点击事件…

(网页开发/前端)配置VsCode,让您拥有更舒适的开发环境

vscode,微软旗下的一款强大的IDE集成开发环境,现在,越来越多的网页开发人员选择使用vscode来敲代码。 但是,在不添加任何扩展的vscode中,想要享受“丝滑”的开发体验是比较困难的。所以,接下来,…

js从地址栏获取参数

一、过程分四步: 1.获取地址栏; var loclocation.href; 2.获取地址栏的长度 var n1loc.length; 3.获取地址栏中第一个等号的位置; var n2loc.indexOf(); 4.以等号位置,截取后面的内容; var strloc.slice(n2…

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。 其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。 语法 Object.entries(obj) 参数 obj:可以返回其可枚举属性…

VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)

概述 写完代码后,最常用、简单的发布方式,就是将应用发布到文件夹,然后将publish文件夹复制到要部署的机器上(本地、局域网服务器、云服务器等)。 但是在实际工作中,可能会遇到需要频繁地发布&#xff0c…

vue--后台管理系统问题和功能实现思路集锦

目录 一、动态菜单 1、问题:点击菜单,其他菜单都会打开,且选中某个菜单,其他菜单都会选中 2、问题:home页面代码内动态菜单数据获取的位置 二、动态路由 1、问题:刷新home页面后,页面报错&…

微信小程序开发(遇到的报错和注释)

一开始验证文章出错了,一直运行不起来,取消设置,可以正常调用。 页面小程序窗口组件部分:navigationbar导航栏区域,background背景区域(默认不可见,下拉才显示)、页面的主题区域&am…

教你一文解决 js 数字精度丢失问题

文章目录一、关于为什么要解决精度丢失二、怎么解决js的计算精度丢失问题?三、toPrecision 特定方法返回四舍五入长度字符串结语一、关于为什么要解决精度丢失 可以看下例子,因为js失去精度问题也是常见的问题,正常我们可以四舍五入或者 toF…

vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少&…

新星微前端MicroApp的基础教程

目录 什么是微前端? 使用场景 microApp介绍 概念图 micorApp的优势 microApp项目的应用 基座 基座路由 子应用 react项目中路由位置进行使用 跨域的问题 react项目中跨域 vue项目中跨域 micorApp基础介绍 micorApp传值(重要) …

Vue 2项目如何升级到Vue 3?

应不应该从 Vue 2 升级到 Vue 3 应不应该升级?这个问题不能一概而论。 首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择。后面课程里,我也会带你使用 Vue 3 的新特性和新语法开发一个项目。 以前我独立使用 Vue 2 开…

【vue】vuex常见面试题

【vue】vuex常见面试题 文章目录【vue】vuex常见面试题一、vuex简介对vuex的理解各模块在流程中的功能:Vuex实例应用二、常见面试题1.Vuex 为什么要分模块并且加命名空间2.Vuex和单纯的全局对象有什么区别?3.为什么 Vuex 的 mutation 中不能做异步操作&a…

css宽高自适应

1. 宽高自适应 举个例子看看什么是宽高自适应, (1)先正常创建一个div标签,有宽和高: 结果: (2)去掉div的宽度,观察结果 结果: 结果占满了整个屏幕&#xff0…

HTML表格样式

9675人阅读 行跟列背景颜色的选择&#xff0c;合并等 列的颜色选择代码 <colgroup span"1" bgcolor"lightgreen"></colgroup> <colgroup span"1" bgcolor"lightyellow"></colgroup> <colgroup span"…