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