Js基础-indexOf()方法的使用

JavaScript027

Js基础-indexOf()方法的使用,第1张

indexOf()只返回字符串在规定的查找顺序中,首次出现的位置

工作中应用 => 如果要检索的字符串值没有出现,则该方法返回 -1

找数组中的元素 也可以使用es6的find()方法

非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串咯,接着上例来写

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

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

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

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

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

参考这篇文章

https://www.jianshu.com/p/1c15be16a85a

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

对比:

1、findIndex()和indexOf方法实现都是通过循环遍历查找。

2、findIndex()的应用场景要比indexOf广泛一些,可以查找大于等于小于,表达式可以随便写,indexOf就只能在第一层查找相等的值。

3、findIndex()实际上相当于一个for循环,只不过找到了你不需要自己退出。

方法一:绑定数据在dom元素上。

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

  window.onload=function() {

  var lis = document.querySelectorAll('ul li')

  for (var i = 0 i < lis.length i++) {

  lis[i]._index = i

  lis[i].onclick = function() {

   alert(this._index + 1)

  }

  }

  }

</script>

</head>

<body>

<ul>

<li>li1</li>

<li>li2</li>

<li>li3</li>

</ul>

</body>

</html>

方法二:闭包

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

window.onload = function ()

    {

    var lis = document.querySelectorAll ('ul li')

    var anonymous = function (i)

    {

    lis[i].onclick = function ()

    {

    alert (i + 1)

    }

    }

    for ( var i = 0 i < lis.length i++)

    {

    anonymous (i)

    }

    }

</script>

</head>

<body>

<ul>

<li>li1</li>

<li>li2</li>

<li>li3</li>

</ul>

</body>

</html>

方法三:使用 let 关键字 声明

浏览器及最低版本支持

Chrome          Firefox (Gecko)   Internet Explorer       Opera

41.0             2.0 (1.8.1) [1]         11                 17

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

    window.onload = function ()

    {

       "use strict"

        var lis = document.querySelectorAll ('ul li')

 

        for ( var i = 0 i < lis.length i++)

        {

         let j = i

            lis[i].onclick = function ()

            {

                alert (j + 1) 

            }

        }

    }

</script>

</head>

<body>

    <ul>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ul>

</body>

</html>