ES6——find()、findindex()、indexof、includes()以及some

简介: find()、findindex()、indexof、includes()以及some

find()

找到第一个之后不再继续找了,找不到就是undefined

例:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>find和findindex</title>
  </head>
  <body>
  <script type="text/javascript">
    let ary = [{
      class: 1,
      name: '张三'
    }, {
      class: 2,
      name: '李四'
    },
    {
      class: 3,
      name: '李四'
    }, 
    ];
    // find用来查找第一个出现的数据,如果找不到就会返回undefined
    let target = ary.find((item,index)=>item.name=== '李四')
    /* let target=ary.find(function(item,index){        // es6以下语法
    return item.name=== '李四'
    }) */
    console.log(target);        
  </script>
  </body>
</html>

效果:

20210928083646399.png

let target = ary.find((item,index)=>item.name=== '李四111')    //undefined

效果:

20210928083746332.png

indexof与findindex的区别

indexOf ()

找到这个参数所在的索引,采用 === 比较,一般是用于查找基本类型,如果是对象类型,则是判断是否是同一个对象的引用.找到就返回元素位置,找不到就返回-1

先看个indexof的例子:

let ary = [1, 5, 10, 15, 20, 30];
         //0, 1, 2,  3,  4,  5
    let target = ary.indexOf(30)
         //  let target = ary.indexOf(2)        //-1
    console.log(target);        //5

findIndex()

findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1,多用于非基本类型(例如对象)的数组索引查找,或查找条件很复杂

看段代码:

let a = [1, 5,8, 15,30,50];
     let index = a.findIndex((value, index) => value > 7); 
  //    let index=a.findIndex(function(b, index){
  //     return b > 7;
  //    })
     console.log(index); // 2

共同点:都是用来查找回调函数。

不同点:indexof主要用于查找基本数据类型 ,findIndex()可以用于查找复杂数据类型

includes()

判断某个数组是否包含给定的值,返回布尔值。

例如:查找这个数组中有没有存在某一个数,如果有返回true,如果没有返回false

var ages = [3, 10, 18, 20];
console.log(ages.includes(3));//true

some()

语法:

array.some(function(currentValue,index,arr),thisValue)

参数 描述

function(currentValue, index,arr)

必须。函数,数组中的每个元素都会执行这个函数 函数参数:。

参数描述currentValue必须。当前元素的值index可选。

当前元素的索引值arr可选。当前元素属于的数组对象

thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined"

some() 方法用于检测数组中的元素是否满足指定条件(函数提供),会依次执行数组的每个元素:

查找checkAdult这个方法中是否满足大于21的这个条件,如果有,返回true;如果没有,返回false 。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>some()</title>
  </head>
  <body>
  <div id="demo">
  </div>
  <script>
    var ages = [3, 10, 18, 20];
    function checkAdult(age) {
     return age >= 21;
    }
    function myFunction() {
     document.getElementById("demo").innerHTML = ages.some(checkAdult);    //false
    }
    myFunction()
  </script>
  </body>
</html>

效果:

20210928114727726.png

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。  


相关文章
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
1023 3
|
消息中间件 缓存 监控
【C++ 观察者模式的应用】跨进程观察者模式实战:结合ZeroMQ和传统方法
【C++ 观察者模式的应用】跨进程观察者模式实战:结合ZeroMQ和传统方法
388 1
|
存储 网络协议 开发者
【 ⑫】requests库概述(文件上传、cookies处理、状态码处理、异常处理等)
【 ⑫】requests库概述(文件上传、cookies处理、状态码处理、异常处理等)
249 0
|
存储 缓存 NoSQL
【缓存】J2Cache —— 基于内存和 Redis 的两级 Java 缓存框架的使用方法
【缓存】J2Cache —— 基于内存和 Redis 的两级 Java 缓存框架的使用方法
704 0
|
Devops 测试技术 持续交付
测试左移,让质量反馈来得更高效,更可靠
大家好,我是阿萨。最近几年大家都在说测试左移。今天我们就聊聊测试左移的话题。
356 0
测试左移,让质量反馈来得更高效,更可靠
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
STM32CubeMX 定时器
STM32CubeMX 定时器
511 0
|
SQL 负载均衡 安全
阿里云DTS踩坑经验分享系列|全量迁移加速方法指南
阿里云数据传输服务DTS是一个便捷、高效的数据迁移和数据同步服务。一般而言,一个完整的DTS数据迁移任务主要包括预检查、结构迁移,全量迁移,增量迁移等阶段,其中全量迁移会将源数据库的存量数据全部迁移到目标数据库。面对各种各样的用户场景, 本文将重点介绍如何使用阿里云DTS实现全量数据迁移加速,以缩短迁移时间,确保数据迁移的效率和稳定性。
1097 0
|
Oracle 关系型数据库 数据库
PgSQL · 最佳实践 · pg_rman源码浅析与使用
背景 对于商业数据库来说,备份的功能一般都非常的全面。 比如Oracle,它的备份工具rman是非常强大的,很多年前就已经支持全量、增量、归档的备份模式,支持压缩等。 还支持元数据存储到数据库中,管理也非常的方便,例如保留多少归档,备份集的管理也很方便,例如要恢复到什么时间点,将此前的备份清除等等。 对于开源数据库来说,支持向商业版本这么丰富功能的比较少,PostgreSQ
3295 0