JS判断是否存在某个元素(includes、indexOf、find、findeIndex、some)(every 数组内所有值是否相同)

  方法一:array.includes(searcElement[,fromIndex])

 此方法判断数组中是否存在某个值,如果存在返回true,否则返回false

  • searchElement:需要查找的元素,必选。
  • fromIndex:可选,从该索引处开始查找元素。如果省略该参数,则从数组的头开始查找。如果 fromIndex 大于或等于数组长度,则返回 false。
const numbers = [1, 2, 3, 4, 5]console.log(numbers.includes(3)) // true
console.log(numbers.includes(6)) // false

如果想要检查数组中是否包含某个对象,可以使用 some() 方法

const users = [{ name: '张三', age: 20 },{ name: '李四', age: 18 },{ name: '王五', age: 35 }
]const user = { name: '李四', age: 18 }const isUserIncluded = users.some(u => u.name === user.name && u.age === user.age)console.log(isUserIncluded) //true

 具体some()方法见下文。

 方法二: array.indexOf

 indexOf 不存在返回-1,存在返回第一次出现的索引

array.indexOf(item,start) 

参数说明: 

item:必须。查找的元素。 

start:可选的整数参数。规定在字符串中开始检索的位置。

它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

var arr = [1, 2, 3, 9, 8, 7]
if(arr.indexOf(5) === -1){console.log("不存在")
}
if (arr.indexOf(9) > -1){console.log("存在,索引是:", arr.indexOf(9))
}

 

注意:string.indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

1.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。 
2. stringObject 中的字符位置是从 0 开始的。 
3. 查找字符串最后出现的位置,使用 lastIndexOf() 方法。

方法三:array.find(callback[, thisArg])

它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined

find() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined 
    注意: find() 对于空数组,函数是不会执行的。 
    注意: find() 并没有改变数组的原始值。

// 返回第一个大于9的元素 // 10
[1, 5, 10, 15].find(function(value, index, arr) {return value > 9
})

 

// 查找 2, find会找出所有存在的 2 以及索引
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2]
arr.find(function(value, index, arr) {if(value === 2 ) {console.log("存在, 索引为:", index)    }
})

 

 方法四:array.findeIndex(callback[, thisArg])

 array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。 
findIndex() 方法为数组中的每个元素都调用一次函数执行:

        当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。 
        如果没有符合条件的元素返回 -1。

注意: findIndex() 对于空数组,函数是不会执行的。 
注意: findIndex() 并没有改变数组的原始值。

// 返回第一个大于9的元素的索引 // 2
[1, 5, 10, 15].findIndex(function(value, index, arr) {return value > 9
})

 如果没有符合条件的元素返回 -1:

//  如果没有符合条件的元素返回 -1
[1, 5, 10, 15].findIndex(function(value, index, arr) {return value > 20
})

 array.findIndex() 和 array.find(),这两个方法都可以发现NaN,弥补了array.indexOf()的不足。

[NaN].indexOf(NaN) // -1[NaN].findIndex(y => Object.is(NaN, y)) // 0

 

 方法五:array.some(callback[, thisArg])

some方法同样用于检测是否有满足条件的元素,如果有,则不继续检索后面的元素,直接返回true,如果都不符合,则返回一个false

参数说明:

  • array:必需参数,一个数组对象。

  • callbackfn:必需参数,一个接收量最多三个参数的函数。函数参数:

    参数描述
    currentValue必须。当前元素的值
    index可选。当前元素的索引值
    arr可选。当前元素属于的数组对象

    some() 方法会为 array 中的每个元素调用 callbackfn 函数,直到 callbackfn 返回 true,或直到到达数组的结尾。

  • thisArg:可选参数,可在 callbackfn 函数中为其引用 this 关键字的对象。如果省略 thisArg,则 undefined 将用作返回 false。

注意:

(1)some()方法不会对空数组进行检测

(2)some()方法不会改变原始数组

示例:

let arr = [1, 2, 3, 4, 5]let result = arr.some(el => el === 3) 
console.log(result) //true
if (result) {//do something...
}

const arr = [1, 2, 3, 4, 5]
const res = arr.some(item => item < 0)
console.log(res) // false

题外话: array.every(function(currentValue,index,arr), thisValue)

提到some()就不得不提到every():

  • every()方法用于检测数组中的所有元素是否都满足指定条件(该条件为一个函数)。
  • every()方法会遍历数组的每一项,如果有有一项不满足条件,则表达式返回false,剩余的项将不会再执行检测。如果遍历完数组后,每一项都符合条,则返回true

参数说明:

  • 第一个参数为一个回调函数,必传,数组中的每一项都会遍历执行该函数。
    currentValue:必传,当前项的值
    index:选传,当前项的索引值
    arr:选传,当前项所属的数组对象
  • 第二个参数thisValue为可选参数,回调函数中的this会指向该参数对象。

注意:

  • every() 不会对空数组进行检测
  • every() 不会改变原始数组
// 数组中的每个元素的值都要大于20的情况,最后才返回true
var arr = [10, 20, 30]
var flag = arr.every(function (a, b, c) {return a > 20
})
console.log(flag) //false

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQLMAP --TAMPER的编写

跟着师傅的文章进行学习 sqlmap之tamper脚本编写_sqlmap tamper编写-CSDN博客 这里学习一下tamper的编写 这里的tamper 其实就是多个绕过waf的插件 通过编写tamper 我们可以学会 在不同过滤下 执行sql注入 我们首先了解一下 tamper的结构 这里我们首先看一个最简单的例子…

动捕设备如何推动线下活动以虚拟主持人创新升级互动形式

随着元宇宙概念兴起&#xff0c;虚拟主持人结合全身动捕设备可以依托大屏、全息等形式直观呈现于线下活动&#xff0c;通过动捕设备实时驱动虚拟主持人&#xff0c;将现实活动场景与虚拟相连接&#xff0c;让活动以科技感、多元化的形式呈现&#xff0c;给活动参与者一种新的视…

YOLOv8优化策略:轻量级Backbone改进 | VanillaNet极简神经网络模型 | 华为诺亚2023

🚀🚀🚀本文改进:一种极简的神经网络模型 VanillaNet,支持vanillanet_5, vanillanet_6, vanillanet_7, vanillanet_8, vanillanet_9, vanillanet_10, vanillanet_11等版本 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8,从入门到创新,…

【自动驾驶解决方案】C++取整与保留小数位

一、C基础 1.1double型保留小数为&#xff0c;并以字符输出 #include <iostream> #include <sstream> #include <iomanip> // 包含std::fixedint main() {//浮点数double number 3.1415926;//转换工具类streamstd::stringstream stream;stream << s…

从入门到精通,mac电脑录屏软件使用教程!

“mac电脑怎么录屏呀&#xff0c;刚买了一台mac电脑&#xff0c;用了几个月感觉挺流畅的&#xff0c;最近因为工作原因&#xff0c;需要用到录屏功能&#xff0c;但是我不会操作&#xff0c;想问问大家有没有简单易懂的录屏教程&#xff0c;谢谢啦。” 在日常生活中&#xff0…

常见Web安全

一.Web安全概述 以下是百度百科对于web安全的解释&#xff1a; Web安全&#xff0c;计算机术语&#xff0c;随着Web2.0、社交网络、微博等等一系列新型的互联网产品的诞生&#xff0c;基于Web环境的互联网应用越来越广泛&#xff0c;企业信息化的过程中各种应用都架设在Web平台…

客户端性能优化实践

背景 双十一大促时&#xff0c;客户客服那边反馈商品信息加载卡顿&#xff0c;在不断有订单咨询时&#xff0c;甚至出现了商品信息一直处于加载状态的情况&#xff0c;显然&#xff0c;在这种高峰期接待客户时&#xff0c;是没法进行正常的接待工作的。 起初&#xff0c;页面一…

音视频技术在手机上的应用与挑战

// 编者按&#xff1a;随着手机相机功能日益强大&#xff0c;4k&#xff0c;8k&#xff0c;各类特色短视频的拍摄&#xff0c;编辑、播放需求日益增长&#xff0c;短视频应用的火爆也对当前的手机音视频技术提出了更高的要求&#xff0c;如何更好地提高用户体验成为了行业共同…

基于SpringBoot+Mybatis+layui的学生成绩管理系统

基于SpringBootMybatislayui的学生成绩管理系统 随着全球信息化的发展&#xff0c;人们的生活节奏越来越快&#xff0c;对信息的时效性越来越重视。以传统的宣传方式为载体的传统媒介早已不能满足用户对获取信息的方式、便捷性的需求。所以平时成绩管理系统渐渐成为用户关注的…

redis--高可用之持久化

redis高可用相关知识 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务(99.9%、99.99%、99.999%等等)。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提供正常服务( 如主…

es的优势

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

白鳝:聊聊IvorySQL的Oracle兼容技术细节与实现原理

两年前听瀚高的一个朋友说他们要做一个开源数据库项目&#xff0c;基于PostgreSQL&#xff0c;主打与Oracle的兼容性&#xff0c;并且与PG社区版内核同步发布。当时我听了有点不太相信&#xff0c;瀚高的Highgo是在PG内核上增加了一定的Oracle兼容性的特性&#xff0c;一般也会…

vue和uni-app的递归组件排坑

有这样一个数组数据&#xff0c;实际可能有很多级。 tree: [{id: 1,name: 1,children: [{ id: 2, name: 1-1, children: [{id: 7, name: 1-1-1,children: []}]},{ id: 3, name: 1-2 }]},{id: 4,name: 2,children: [{ id: 5, name: 2-1 },{ id: 6, name: 2-2 }]} ]要渲染为下面…

11.15 监控目录文件变化

监视对指定目录的更改&#xff0c;并将有关更改的信息打印到控制台&#xff0c;该功能的实现不仅可以在内核层&#xff0c;在应用层同样可以。程序中使用ReadDirectoryChangesW函数来监视目录中的更改&#xff0c;并使用FILE_NOTIFY_INFORMATION结构来获取有关更改的信息。 Re…

打破传统束缚,释放服务潜能:本地生活服务商聚合系统引领行业新风向!

本地生活服务商聚合系统是一种集合多平台、多项目的创新型服务系统&#xff0c;它打破了传统服务商系统的一对一限制&#xff0c;为创业者和运营商带来了诸多优势。小多将深入探讨本地生活服务商聚合系统的优势。 随着互联网的快速发展&#xff0c;本地生活服务也迎来了蓬勃的发…

ESP32 http 请求

目录 参考教程1.使用的http连接2.使用Vscode-IDF创建http_request例程3.修改http_request_example_main.c函数4.已经获取到响应的数据 参考教程 ESP-IDF HTTP获取网络时间 1.使用的http连接 http://api.m.taobao.com/rest/api3.do?apimtop.common.getTimestamp请求可以得到…

Qt http

文章目录 前言1. 定义的接口2.connect信号槽3. get4. get 下载文件5. post 总结 前言 /* 1.请求报文&#xff1a; 请求报文是由客户端发送给服务器&#xff0c;用于请求特定资源或执行特定操作。它由以下几个部分组成&#xff1a; 请求行&#xff1a;描述了请求的方法、目标资源…

7-tcp 三次握手和四次挥手、osi七层协议,哪七层,每层有哪些?tcp和udp的区别?udp用在哪里了?

1 tcp 三次握手和四次挥手 2 osi七层协议&#xff0c;哪七层&#xff0c;每层有哪些 3 tcp和udp的区别&#xff1f;udp用在哪里了&#xff1f; 1 tcp 三次握手和四次挥手 # tcp协议---》处于osi7层协议的传输层&#xff0c;可靠连接&#xff0c;使用三次握手&#xff0c;四次挥…

Linux 安装多版本 JDK 详细过程

背景说明 服务器已安装jdk1.8,但随着spring全家桶的升级换代&#xff0c;已不满足使用&#xff0c;先要用高版本jdk&#xff0c;暂时不想卸载旧的版本&#xff0c;故安装两个版本&#xff0c;jdk1.8和jdk17,jdk1.8的已经安装过了&#xff0c;所以此次只安装jdk17,以及配置jdk切…

Android resource/drawable转换成Uri,Kotlin

Android resource/drawable转换成Uri&#xff0c;Kotlin private fun convertResource2Uri(resId: Int): Uri {return Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE "://" resources.getResourcePackageName(resId) / resources.getResourceTypeName(resI…