javascript - 无法理解这段JS代码【数组和过滤器】

Question

我遇到一个问题，要求我们这样做

combine arrays

var array1 = [1, 2, 3]; 
var array2 = [2, 30, 1];

然后删除所有重复的项目，以便预期输出为

[1, 2, 3, 30]

在评论部分有一个我无法理解的解决方案:

var array1 = [1, 2, 3];
var array2 = [2, 30, 1];
function concatArrays(array1, array2){
    var concated = array1.concat(array2);
    var solution = concated.filter(function(element,Index,self){
        return Index== self.indexOf(element);
    });
console.log(solution);
}
concatArrays(array1,array2);

所以我想理解这一行

var solution = concated.filter(function(element,Index,self){
        return Index == self.indexOf(element);
    });

我知道过滤器方法的作用，但在返回部分我无法理解他的代码。
这就是我认为返回部分的作用:
将元素索引与当前元素索引进行比较。如果相等则返回，否则不执行任何操作。
不知道我的理解对还是错。

Answer 1

您可以为过滤器循环的每个步骤插入一个输出并检查值，您会得到

                                                   result
  element       index     indexOf   comparison      array
----------  ----------  ----------  ----------  ----------
        1           0           0        true           1
        2           1           1        true           2
        3           2           2        true           3
        2           3           1       false
       30           4           4        true          30
        1           5           0       false

如您所见，如果比较为true，则该项目将进入结果。这意味着，实际元素的索引必须与 Array#indexOf 的值相同。 。 indexOf 返回所需项目的第一个索引，如果未找到，则返回 -1。因此，如果索引和 indexOf 的值不相等，那么您找到了第二个或第三个值，但不是第一个。

function concatArrays(array1, array2) {
    var concated = array1.concat(array2);
    console.log('element', 'Index', 'indexOf', 'comparison');
    var solution = concated.filter(function (element, Index, self) {
        console.log(element, Index, self.indexOf(element), Index == self.indexOf(element));
            return Index == self.indexOf(element);
        });
    console.log(solution);
}

var array1 = [1, 2, 3];
var array2 = [2, 30, 1];

concatArrays(array1, array2);

.as-console-wrapper { max-height: 100% !important; top: 0; }