在 JavaScript 数组中优雅地删除或推入值：优化代码指南

2024-03-10 15:02:37

在数组中优雅地删除或推入值

作为程序员，我们经常需要处理数组，其中一个常见的任务是查找一个值，如果存在就将其删除，如果不存在就将其推入数组中。

删除现有值

删除数组中现有值的传统方法是使用 Array.indexOf() 查找该值，然后使用 Array.splice() 将其删除。虽然这种方法很直接，但它有点冗长，需要编写多行代码。

一个更优雅的方法是使用 Array.includes() 方法，它返回一个布尔值，指示数组中是否包含给定的值。我们可以利用这一点来简化删除过程：

const numbers = [1, 2, 3, 4, 5];
const valueToRemove = 3;

if (numbers.includes(valueToRemove)) {
  numbers.splice(numbers.indexOf(valueToRemove), 1);
}

推入不存在的值

如果要将不存在的值推入数组，可以使用 Array.push() 方法。但是，与删除类似，我们可以使用 Array.includes() 来优化此操作：

const numbers = [1, 2, 3, 4, 5];
const valueToAdd = 6;

if (!numbers.includes(valueToAdd)) {
  numbers.push(valueToAdd);
}

一个更通用的解决方案

上面的方法只适用于简单的数组操作。如果我们想处理更复杂的情况，例如基于条件删除或推入多个值，我们可以使用以下通用函数：

function arrayManipulation(array, value, operation) {
  if (operation === "remove") {
    if (array.includes(value)) {
      array.splice(array.indexOf(value), 1);
    }
  } else if (operation === "add") {
    if (!array.includes(value)) {
      array.push(value);
    }
  }
}

这个函数接受一个数组、一个值和一个操作作为参数，并执行相应的操作。

实际应用

这个数组操作技术在各种场景中非常有用，例如：

表单验证：检查表单字段的值是否已存在于列表中。
去重：从数组中删除重复值。
购物篮：跟踪购物篮中已添加和删除的项目。

结论

通过使用 Array.includes() 方法，我们可以优雅且高效地执行数组操作，无论是在删除现有值还是推入不存在的值方面。这些技术对于在 JavaScript 应用程序中处理数组是必不可少的。

常见问题解答

如何判断一个值是否在数组中？
- 使用 Array.includes() 方法。
如何删除一个不存在的值？
- 没有必要，如果值不存在，就不必执行任何操作。
如何同时删除和推入多个值？
- 使用上面提到的 arrayManipulation() 函数。
我可以使用 Array.find() 方法吗？
- 是的，Array.find() 可以用来查找值，但它不适用于数组操作。
为什么不使用 Array.filter()？
- Array.filter() 不适用于修改原始数组，而 Array.includes() 和 Array.push() 可以。