如何在 JavaScript 中从另一个数组中过滤掉所有元素?


本文我们将介绍如何在 JavaScript 中从另一个数组中过滤掉所有元素。在深入讲解之前,让我们快速回顾一下 JavaScript 中的数组。

数组用于在一个变量中存储多个值。与只能存储一个值的变量相比,数组的每个元素都有一个关联的数字,称为数值索引,可以通过它来访问元素。JavaScript 中的数组从索引零开始,并且可以使用多种方法进行修改。

为了从另一个数组中过滤数组元素,可以使用 `filter()` 方法。让我们深入文章,了解更多关于如何从另一个数组中过滤数组元素。

JavaScript 中的 filter()

`filter()` 方法创建一个包含通过函数提供的测试的所有元素的新数组。对于空元素,`filter()` 方法不会运行该函数。`filter()` 方法不会改变原始数组。

语法

以下是 `filter()` 的语法:

array.filter(function(currentValue, index, arr), thisValue)

让我们看下面的例子,来了解如何在 JavaScript 中从另一个数组中过滤数组元素。

示例

在下面的示例中,我们运行脚本从所有元素中过滤数组。

<!DOCTYPE html>
<html>
<body>
   <script>
      var array1 = [0,7,8,6],
      array2 = [6,8],
      result = array1.filter(item => !array2.includes(item));
      document.write(result);
   </script>
</body>
</html>

脚本执行后,会在网页浏览器上输出一个更新后的数组,该数组是由上述脚本中提供的两个数组过滤后生成的,并在网页浏览器上显示其余的数组元素。

示例

考虑下面的例子,我们使用 filter,并且对于 filter 我们使用 reduce。

<!DOCTYPE html>
<html>
<body>
   <script>
      var a1 = [3, 0, 6, 8,9],
      a2 = [8, 0,6];
      var filtered = a1.filter(function(x) {
         return !a2.reduce(function(y, z) {
            return x == y || x == z || y == true;
         })
      });
      document.write(filtered);
   </script>
</body>
</html>

运行上述脚本后,网页浏览器会显示在触发脚本执行的事件中出现的数组元素,该事件比较提供的两个数组,然后进行过滤;对于过滤,我们使用了 reduce 并显示了元素。

示例

让我们来看另一个例子,在这个例子中我们使用 `fill()` 方法。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      var array1= [1,2,3,4,5];
      var array2=[2,4,5,4]
      function fill(value){
         return value !=array2[0] && value != array2[1]
      }
      document.getElementById("tutorial").innerHTML= array1.filter(fill)
   </script>
</body>
</html>

脚本执行后,会在网页浏览器上输出一个数组,该数组是由脚本中提到的两个数组过滤后,通过执行脚本触发的事件在网页浏览器上生成的。

示例

执行以下代码,观察会发生什么。

<!DOCTYPE html>
<html>
<body>
   <script>
      var result = [100,110,150,180,190,175].filter(
         function(obj) {
            return this.indexOf(obj) < 0;
         },
         [100,150,175]
      );
      document.write("After filter, the result is=");
      document.write(result);
   </script>
</body>
</html>

运行上述脚本后,事件被触发并在网页浏览器上显示一个数组以及一些文本。显示的数组元素是通过过滤上述脚本中提到的两个数组获得的。

更新于:2023年1月18日

528 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告