谁能解释一下 Filter 和 IndexOf 方法如何在函数中协同工作?

Question

我有以下函数，它几乎可以完成它应该做的事情，但我想确切地了解它在循环的每个步骤上的作用。

您能否看一下下面的函数，并给我一个清晰的解释，注释每个步骤或过滤器和索引方法？

提前非常感谢你。

var arr = [6,2,6,8,9,9,9,4,5];
var unique = function(){
return arr.filter(function(e, i, a) {
return i === a.indexOf(e);
})
}
unique();

Answer 1

indexOf返回数组中元素的第一个索引：

[1,2,2,3].indexOf(2); // 1

因此，如果您像示例中一样使用filter，当它到达元素的第二次出现时，索引(在您的示例中i(将不等于indexOf返回的值并被删除。在我的数组中，第二个 2 位于位置 2，这显然不严格等于indexOf返回的那个。

[1,2,2,3].filter((value, index, array) => array.indexOf(value) === index);
// first iteration: value is 1, index is 0, indexOf is 0 0===0 keep 1
// second: value is 2, index is 1, indexOf is 1, 1===1 keep 2
// third: value is 2, index is 2, indexOf is 1, 1===2 false! toss 2
// etc. 

最终效果是任何重复的元素都会从filter返回的副本中删除。它是一个副本，原始数组没有突变。

编辑

我可能应该提到，最新版本的JavaScript给了我们一个更好的方法：

let arrayWithDupes = [1,2,2,3];
let uniq = Array.from(new Set(arrayWithDupes)); // [1,2,3]

Answer 2

如果记录如下值：

var arr = [6,2,6,8,9,9,9,4,5];
var unique = function(){
return arr.filter(function(e, i, a) {
console.log('e: ' + e);
console.log('i: ' + i);
console.log('a: ' + a);
return i === a.indexOf(e);
})
}
var unq = unique();
console.log(unq);

您将获得：

"e: 6"
"i: 0"
"a: 6,2,6,8,9,9,9,4,5"

等等...

e = 数组中的当前元素，i = 数组的索引，a = 数组源;

Filer 函数："filter(( 方法创建一个数组，其中填充了通过测试的所有数组元素(作为函数提供(。

indexOf："indexOf(( 方法在数组中搜索指定的项，并返回其位置。