无法理解此 JS 代码 [数组和过滤器]

Question

我遇到了一个问题，要求我们

组合数组

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);
    });

我知道过滤器方法的作用，但是在返回部分中，我无法理解他的代码。
这就是我认为返回部分的作用：
将index of element与index of current 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; }

Answer 2

Filetr 函数非常简单，它基于 prev 数组和传递的函数创建新数组。
如果传递的函数返回 true 元素，则推送其他元素。

这是此函数的简单实现，以帮助您理解它：

function Filter(array, func) {
  var newArray = [];
  for (var i = 0; i < array.length; i++) {
    if (func(array[i], i, array)) {
      newArray.push(array[i]);
    }
  }
  return newArray;
}
console.log(Filter([1, 1, 1, 2, 3, 4], function(element, index, self){
    return index == self.indexOf(element);
}))

现在，如果我们遍历数组元素并为每个元素检查是否在其索引中找到该项目，因为indexOf返回找到的第一个索引，我们不会添加重复项。