优雅遍历数组：删繁就简，只需几步即可去除指定元素！

2023-12-18 16:07:20

拨开迷雾，拥抱简单：Array.filter()和Array.includes()携手出击！

在JavaScript的世界中，数组可谓是无处不在的数据结构。从存储用户输入到处理复杂数据集，数组都发挥着至关重要的作用。然而，当我们需要从数组中剔除指定元素时，却往往会陷入繁琐的循环怪圈。

告别旧日烦恼，拥抱简单新时代！JavaScript为我们提供了两大法宝：Array.filter()和Array.includes()，它们携手出击，助你轻松搞定数组元素的剔除任务。

揭秘Array.filter()：过滤的艺术

Array.filter()方法可谓是数组处理中的点睛之笔。它接受一个回调函数作为参数，该函数对数组中的每个元素进行判断，并返回一个布尔值。如果回调函数返回true，则该元素将被保留在数组中；否则，该元素将被剔除。

让我们一睹Array.filter()的优美身姿：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]

这段代码中，我们首先定义了一个名为numbers的数组，其中包含从1到10的数字。然后，我们使用Array.filter()方法创建了一个名为evenNumbers的新数组。该方法接受一个回调函数作为参数，该函数对数组中的每个元素进行判断，并返回一个布尔值。在这个例子中，回调函数检查每个数字是否为偶数。如果数字为偶数，则回调函数返回true，该数字将被保留在数组中；否则，该数字将被剔除。

运行这段代码后，控制台将输出一个包含所有偶数的数组：[2, 4, 6, 8, 10]。

巧用Array.includes()：元素存在的卫士

Array.includes()方法则是数组处理中的另一位得力助手。它接受一个值作为参数，并在数组中搜索该值。如果数组中存在该值，则返回true；否则，返回false。

让我们看看Array.includes()的妙用：

const fruits = ['apple', 'banana', 'cherry', 'durian', 'elderberry'];
const isDurianIncluded = fruits.includes('durian');
console.log(isDurianIncluded); // true

这段代码中，我们首先定义了一个名为fruits的数组，其中包含各种水果的名称。然后，我们使用Array.includes()方法检查数组中是否包含“durian”。该方法返回true，表明数组中确实包含“durian”。

携手并进，成就剔除大业

现在，我们已经了解了Array.filter()和Array.includes()的强大之处。让我们将它们结合起来，轻松剔除数组中指定元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const elementsToRemove = [3, 5, 7];
const filteredNumbers = numbers.filter((number) => {
  return !elementsToRemove.includes(number);
});
console.log(filteredNumbers); // [1, 2, 4, 6, 8, 9, 10]

这段代码中，我们首先定义了一个名为numbers的数组，其中包含从1到10的数字。然后，我们定义了一个名为elementsToRemove的数组，其中包含需要从numbers数组中剔除的元素。

接下来，我们使用Array.filter()方法创建了一个名为filteredNumbers的新数组。该方法接受一个回调函数作为参数，该函数对数组中的每个元素进行判断，并返回一个布尔值。在这个例子中，回调函数检查每个数字是否包含在elementsToRemove数组中。如果数字不在elementsToRemove数组中，则回调函数返回true，该数字将被保留在数组中；否则，该数字将被剔除。

运行这段代码后，控制台将输出一个剔除了所有指定元素的数组：[1, 2, 4, 6, 8, 9, 10]。