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