js中findIndex()、find()、indexOf()、includes()方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了js中findIndex()、find()、indexOf()、includes()方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、findIndex( ) 方法

findIndex方法常用来查找满足条件的第一项索引，找到了就返回该索引，找不到返回-1。

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 5, 4 ]
 
let index = arr.findIndex(item => {
    return item > 5
})
console.log(index) // 4
 
// 也可以这么写
let index = arr.findIndex(item => item > 5)
 
console.log(index) // 4

注意:findIndex会对数组中的每一项执行一个函数来判断是否满足表达式，如果满足条件后，剩下的元素则不再执行。

2、find( )方法

find方法用来查找满足条件的第一项，找到了就返回那一项对应的值，找不到返回undefined。

    let arr = [
      {
        name: '测试1',
        id: 1
      },
      {
        name: '测试2',
        id: 2
      },
      {
        name: '测试3',
        id: 3
      }
    ]
 
    let value = arr.find(item => {
      return item.id === 20
    })
    
    // 还可以这么写
    let value = arr.find(item => item.id === 2)
    console.log(val)  
    // {
           name: '测试2',
           id: 2
       }

和findIndex一样，返回满足条件的值，并且不检测剩余值，只不过findIndex返回的是下标，find方法是返回满足条件的那一个元素，具体怎么使用看场景需要

注：两个方法都不会改变原数组

3、indexOf( )方法

indexOf方法可用来查找满足条件的第一项索引，找到了就返回该索引，找不到返回-1。
注：startIndex搜索的起始位置默认为0，可选

let arr = [1, 2, 3, 4];
console.log(arr.indexOf(2))   //1
console.log(arr.indexOf(2,2)) //-1
console.log(arr.indexOf(5))   //-1

4、includes( )方法

includes方法可用来判断一个数组是否包含一个指定的值，有则返回 true，没有则返回false。
也可以查找字符串中是否包含指定的子字符串。文章来源地址https://www.toymoban.com/news/detail-474056.html

    let arr = [1, 2, 3, 4];   //数组
    //或
    let arr = '1234';        //字符串
    console.log(arr.includes(2))   //true
	console.log(arr.includes(5))   //false