脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES6 find() findIndex()

详解ES6数组方法find()、findIndex()的总结

 更新时间：2020年05月12日 10:54:58   作者：huangfuyk  
这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文主要讲解ES6数组方法find()与findIndex()，关于JS的更多数组方法，可参考以下：

①JavaScript 内置对象之-Array

②ES5新增数组方法（例：map()、indexOf()、filter()等）

③ES6新增字符串扩张方法includes()、startsWith()、endsWith()

1. find()

该方法主要应用于查找第一个符合条件的数组元素，即返回通过测试（函数内判断）的数组的第一个元素的值。

它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素，之后的值不会再调用执行函数。如果没有符合条件的元素，返回值为undefined。

例：

① 以下代码在myArr数组中查找元素值大于5的元素，找到后立即返回，并不会继续往下执行。返回的结果为查找到的元素：

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>5);
console.log(v);

结果：


② 如果把条件改为>10，没有符合元素，则返回undefined:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>10);
console.log(v);

结果：


③ 它的回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。

例：

查找索引值为5的元素，结果显示6：

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
 return index===5;
});
console.log(v);

结果：

注意：

  • find() 对于空数组，函数是不会执行的。
  • find() 并没有改变数组的原始值。

2. findIndex()

  • findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置（注：find()返回的是元素），之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1（注：find()返回的是undefined）。
  • findIndex()与find()的使用方法相同，findIndex()当中的回调函数也是接收三个参数，与find()相同。
  • findIndex()方法实现是通过循环遍历查找。应用场景广泛，可以查找大于等于小于，表达式可以随便写。实际上相当于一个for循环，只不过找到了你不需要自己退出。

语法：

array.findIndex(function(currentValue, index, arr), thisValue);

例①：

const myArr=[
 {
 id:1,
 Name:"张三"
 },
 {
 id:2,
 Name:"李四"
 },
 {
 id:3,
 Name:"王五"
 },
 {
 id:4,
 Name:"赵六"
 }
];
var i0=myArr.findIndex((value)=>value.id==1);
console.log(i0); 
var i1=myArr.findIndex((value)=>value.id==2);
console.log(i1); 
var i2=myArr.findIndex((value)=>value.id==3);
console.log(i2); 
var i3=myArr.findIndex((value)=>value.id==4);
console.log(i3); 
var i4=myArr.findIndex((value)=>value.id==5);
console.log(i4);

结果：


例②：

const myArr = [1,2,3,4,5,6,7,8,9];
function bigNum(ele){
 return ele > 6;
}
console.log(myArr.findIndex(bigNum));

结果（也就是数组中第一个大于6的数，即“7”所在位置的索引）：


例③：可以用来返回符合大于输入框中数字的数组索引

var ages = [2,4,6,8,10];
 
function checkAdult(age) {
 return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
 document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

注意:

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

到此这篇关于详解ES6数组方法find()、findIndex()的总结的文章就介绍到这了,更多相关ES6 find() findIndex()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js中匿名函数的N种写法

    js中匿名函数的N种写法

    在java中有private属性，强大的功能js不能实现就矮人一截，匿名函数，发扬广大
    2010-09-09
  • 在Chrome DevTools中调试JavaScript的实现

    在Chrome DevTools中调试JavaScript的实现

    这篇文章主要介绍了在Chrome DevTools中调试JavaScript的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js+html5实现复制文字按钮

    js+html5实现复制文字按钮

    这篇文章主要为大家详细介绍了js+html5实现复制文字按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • document.write的几点使用心得

    document.write的几点使用心得

    一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。
    2014-05-05
  • js+audio实现音乐播放器

    js+audio实现音乐播放器

    这篇文章主要为大家详细介绍了js+audio实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS面试必备之手写call/apply/bind/new

    JS面试必备之手写call/apply/bind/new

    在JavaScript中,call、apply、bind、new是Function对象自带的三个方法,也是面试时常考的知识点，所以本文就来和大家讲讲如何手写实现这四个方法吧
    2023-05-05
  • 如何轻松在JavaScript中字符串的字符之间添加空格

    如何轻松在JavaScript中字符串的字符之间添加空格

    在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,下面这篇文章主要给大家介绍了关于如何轻松在JavaScript中字符串的字符之间添加空格的相关资料,需要的朋友可以参考下
    2023-03-03
  • js 使用方法与函数 总结

    js 使用方法与函数 总结

    js使用方法小结，比较不错，无论是新手，还是老手都是不错的。
    2009-05-05
  • js日期相关函数dateAdd,dateDiff,dateFormat等介绍

    js日期相关函数dateAdd,dateDiff,dateFormat等介绍

    这篇文章主要介绍了js日期相关函数dateAdd,dateDiff,dateFormat等介绍,需要的朋友可以参考下
    2016-09-09
  • echarts 移动端竖着显示效果实现

    echarts 移动端竖着显示效果实现

    这篇文章主要为大家介绍了echarts 移动端竖着显示效果实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07

最新评论