如何在JavaScript中使用indexOf和filter（）

Question

这是我找到的代码作为这个问题的答案：编写一个JavaScript程序来从数组中删除重复项（忽略区分大小写）。

var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})
console.log(uniqueArray);

我知道filter（）做了什么，indexOf用于查找元素第一次出现的索引，但我不明白这行怎么做：

i == rep.indexOf(elem);

仅向uniqueArray引入唯一元素。

Answer 1

根据MDN关于Array#indexOf的文章：

indexOf（）方法返回可在数组中找到给定元素的第一个索引，如果不存在则返回-1。

在您提供的代码中：

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})

过滤器回调中的变量i是数组中当前项的索引。如果项目有多个外观，则当前索引（i）和Array＃indexOf返回的索引对于1st之后的重复值将有所不同。在这种情况下，过滤器回调将返回false，并且将过滤掉重复的值。

Answer 2

i == rep.indexOf(elem);

将始终返回在数组中找到元素的第一个索引，因此在筛选的数组中只接受任何副本中的第一个。

Answer 3

返回测试i等于找到的元素的索引，因此函数返回将为true或false。

Answer 4

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})

这里elem将包含数组的每个元素，我将是当前elem的索引，rep将包含整个数组 现在rep.indexOf（elem）;总是给出元素第一次出现的索引现在Array.prototype.filter（）的工作方式是，如果你返回true，它就不会过滤它但是如果你返回false，它会过滤掉所有元素除了第一次出现被过滤掉了

Answer 5

来自w3schools

array.filter（function（currentValue，index，arr），thisValue）

在你的例子的.filter方法中，函数迭代遍历每个索引并使用indexOf找到你所说的：“第一次出现的索引。”

在迭代期间，索引i遇到重复元素，并且您使用测试来查看此i是否等于给定数组中当前元素的索引。

来自w3schools：

filter（）方法创建一个数组，该数组填充了所有传递测试的数组元素（作为函数提供）。

你的例子中的测试是i == rep.indexOf(elem);。

当迭代到达索引2时，元素是a。然而，元素a的第一次出现在索引1。在这一点上，i=2但rep.indexOf(elem) = 1。测试返回false，因为2==1是false。

这个false返回从新创建的数组中排除索引a处的重复元素2。

Answer 6

var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var newArray = arr1.filter((obj,index,array)=> { return                                      array.map(ele => ele).indexOf(obj) ==                                                                   index});
  console.log(newArray)

Answer 7

var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})
console.log(uniqueArray);

让我试着解释代码及其结果。

Array.prototype.filter可以采取三个论点。在你的代码中，

1. elem是Array arr1的一个元素。
2. i是elem中arr1的指数。
3. 它在arr1有一个索引。
4. rep和Array是同一个arr1。只要将rep视为arr1。

根据[MDN的文章] [1]，indexOf()方法返回可以在数组中找到给定元素的第一个索引，如果不存在则返回-1。

现在我们可以尝试理解代码的作用。

1. 如果我们假设elem的值是'a'，rep.indexOf(elem);将返回1。
2. 假设elem是'a'并且elem i的指数是3，return i == rep.indexOf(elem);将返回false并且当true指数等于i时将返回1。

这意味着过滤器将返回一个数组，其中包含Array中每个元素的第一个索引中的值。

让我们模拟代码：

var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var uniqueArray = arr1.filter(function(elem,i,rep){
    console.log("index  :"+i+" first indext of this value: "+rep.indexOf(elem)+" element :"+elem+ " is filterable :"+(i == rep.indexOf(elem)) );
    return i == rep.indexOf(elem);
})
console.log(uniqueArray);