javascript indexof()方法 获取当前点击标签的索引问题

Question

这几天在看别人写的某段代码的时候自己一直理解不了这个，希望得到解释，谢谢

html结构如下

<p onclick="getClickIndex(e)" id="result">
    <p>1</p>
    <p>3</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>8</p>
</p>

js 代码

var data=[1,3,2,3,4,8];//#result的数据来自这
function getClickIndex(e) {
    var node = e.target;
    var nodearr=node.parentNode.children
    var index= data.indexOf.call(nodearr, node);
    return index;
}

上面能返回点击的标签 在#result 下的索引，主要是不明白 indexof.call()的结果为什么会是点击的那个索引,因为根据W3C 上面的解释，应该是返回第一次出现的索引。

下面是W3C的解释

首先谢谢各位的帮助，但是我还是有一点疑惑，indexof 是获取第一次出现的索引，当没有重复的元素还好理解，但是如上面的 如果出现重复了 他是怎么给indexof 第二个参数的检索位置的，其实那个检索位置就是索引吧。

Answer 1

首先，这里就是Array的indexOf方法的使用，你看起来有些困惑估计是代码的写法问题。

你确定这段代码可以跑？按照下面的写法，在getIndexClick中的参数e应该是undefined，怎么去拿e.target?

onclick="getClickIndex()"

另外他就是要调用Array的indexOf，这样写感觉有困惑或者歧义，感觉index好像和data有关似得：

var data=[1,3,2,3,4,8];
//...
data.indexOf.call(nodearr, node);

完全可以这么写：

[].indexOf.call(nodearr, node);
// or
Array.prototype.indexOf.call(nodearr, node);
// or
var array = Array.prototype.slice.call(nodearr, 0); // 先转成数组
array.indexOf(node);    // 再调用数组的indexOf方法

Answer 2

因为你的node是e.target，是当前触发的元素

Answer 3

你找的这个indexof是string的indexof，和代码里的不是同一个，代码里是调用了数组Array中的indexof, 这个函数是用来查找元素在数组中的位置的 所以返回的是点击的元素的位置

Answer 4

1. onclick="getClickIndex(event)",把event加上。

2. 把函数改成这样就看得懂了：

   function getClickIndex(e) {
     var node = e.target //目标p
     var nodeCollection = node.parentNode.children //所有子p的集合,类数组
     var nodeArr = Array.from(nodeCollection) //把类数组转成数组
     var index = nodeArr.indexOf(node) //拿到index
     return index;
   }

3. nodeArr里面的元素都是不一样的节点，点击的节点也是唯一的，所以不会有重复。

4. 你贴的那个图是字符串的indexOf方法，虽然用法和数组的基本一样，但是这里是在用Array.prototype.indexOf方法。