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

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返回找到的第一个索引，我们不添加重复项。

Answer 2

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

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

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

2 个答案: