详解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()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ES6中Array.find()和findIndex()函数的用法详解

    ES6为Array增加了find(),findIndex函数. find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined. findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1. 他们的都是一个查找回调函数. [1, 2, 3, 4].find((value, index, arr) => { }) 查找函数有三个参数. value:每一次迭代查找的数组元素. index:每一次迭代查找的数组元素索引. arr:被查找的数组. 例: 1.查找

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

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

    本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map().indexOf().filter()等) ③ES6新增字符串扩张方法includes().startsWith().endsWith() 1. find() 该方法主要应用于查找第一个符合条件的数组元素,即返回通过测试(函数内判断)的数组的第一个元素的值. 它的参数是一个回调函数,为数组中的每个元素都调用一次函

  • 详解JS数组方法

    目录 一.会修改原数组 1.push(): 2.pop(): 3.shift(): 4.unshift(): 5.splice(): 6.sort(): 7.reverse(): 二.不修改原数组 1.toString(): 2.join(): 3.concat(): 4.slice() : 5.map(): 6.forEach(): 7.filter(): 8.every(): 9.some(): 10.reduce(): 总结 一.会修改原数组 1.push(): (在数组结尾处)向数组添加

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

    当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时,我们会不假思索回答道:indexOf方法.其实,ES6 又提供了三种新方法includes().startsWith().endsWith(),也是比较好用的. indexOf方法在这里就不多说了,大家都比较熟悉,意思就是:返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置,如果没有出现则返回-1. 下面详细介绍ES6新增的这三种方法: ①includes():返回布尔值,表示是否找到了参数字符串. 如下所示: let

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • 详解ES6 中的迭代器和生成器

    目录 1.迭代器 2.生成器 1.迭代器 Iterator是 ES6 引入的一种新的遍历机制.两个核心 迭代器是一个统一的接口,它的作用是使各种数据结构可以被便捷的访问,它是通过一个键为Symbol.iterator的方法来实现. 迭代器是用于遍历数据结构元素的指针(如数据库中的游标). // 使用迭代 // 1.使用Symbol.iterator创建一个迭代器 const items = ['one','a','b']; const it = items[Symbol.iterator]();

  • JavaScript学习笔记之ES6数组方法

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层.在这一节中将总结有关于ES6给数组提供一些新特性的使用方法. ES6提供

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • 详解ES6 CLASS在微信小程序中的应用实例

    ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

随机推荐