如何使用Array.prototype.filter方法从数组中删除单个指定元素？

基本运行原理 #

filter是JavaScript数组内置的实例方法，核心作用是根据自定义规则筛选数组元素，返回一个仅包含符合条件元素的新数组，不会修改原数组。
它的调用逻辑如下：

• 接收一个回调函数作为必填参数，还可以传入第二个可选参数指定回调内部的this指向
• 会自动遍历原数组的每一个元素，每遍历一个元素就执行一次回调函数，把当前元素、当前下标、原数组三个参数传入回调
• 回调函数返回布尔值，决定当前元素是否被保留到新数组中：
  • 返回true（或真值）：当前元素放入新数组
  • 返回false（或假值）：当前元素被过滤丢弃

举个基础示例：筛选数组中所有偶数

const numArr = [1, 2, 3, 4, 5, 6]
const evenArr = numArr.filter(item => item % 2 === 0)
// 最终evenArr为 [2,4,6]，原numArr不会发生任何变化

核心过滤规则 #

• 仅保留回调返回真值的元素，false、0、空字符串''、null、undefined、NaN这类假值对应的元素都会被剔除
• 属于纯函数，不会修改原数组，非常适配React/Vue这类要求数据不可变的框架场景
• 遍历过程中会自动跳过数组的空槽（比如[1, , 3]中的空位不会触发回调执行）

代码片段逻辑解析 #

你提供的删除购物车商品代码逻辑如下：

removeFromCart =(product) => {
  const cartItems = this.state.cartItems.slice()
  this.setState({
    cartItems: cartItems.filter((x)=>x.id!==product.id)
  })
}

逐行说明：

1. const cartItems = this.state.cartItems.slice()：调用无参slice()方法复制了一份state里的原购物车数组，避免直接修改state（React规范要求不能直接修改state，必须通过setState更新）
2. cartItems.filter((x)=>x.id!==product.id)：
   • 遍历复制出来的购物车数组，x代表当前遍历到的单个商品项
   • 判断逻辑是「当前商品id不等于要删除的商品id」，符合这个条件的商品才会被保留到新数组里
   • 也就是说id和要删除的商品一致的项会被过滤掉，实现了删除指定商品的效果
3. 最后把筛选后的新购物车数组通过setState更新到组件状态，触发视图重新渲染，页面上的购物车就会移除对应商品

内容的提问来源于stack exchange，提问作者na ha