如何在 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>
运行上述脚本后,事件被触发并在网页浏览器上显示一个数组以及一些文本。显示的数组元素是通过过滤上述脚本中提到的两个数组获得的。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP