对象数组筛选出非选中的数据

最新推荐文章于 2025-05-13 16:46:04 发布

原创最新推荐文章于 2025-05-13 16:46:04 发布 · 290 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在JavaScript中处理表格数据选中状态的方法。当用户选中表格数据并关闭后，再次打开时，上次选中的数据应被移除。通过使用map()和filter()函数，可以实现这一功能。map()函数用于遍历数组，every()函数判断选中数据是否与当前项匹配，filter()则用于筛选出不匹配的项，从而达到移除选中数据的效果。

应用场景：

如下图，从表格中选中数据，点击确定。

当再次打开表格的时候，上一次选中的数据被移除，剩下非选中的数据。

实现之前对map,every,filter函数进行一定的了解

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。

filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

实现方式一：

// tableData：原对象数组
// selectedRows： 选中的对象数组
const data = tableData.map((item) => {  // 这里用的是map
      if (selectedRows.every((v) => v.id !== item.id)) {
        return item;
      }
    });
console.log(data.filter(Boolean), "剩下的对象数组数据");  // 这里要进行非空的过滤

实现方式二：

// tableData：原对象数组
// selectedRows： 选中的对象数组
const _data = tableData.filter((item) => {  // 这里用的filter
      return selectedRows.every((v) => v.id !== item.id);
    });
console.log(_data, "剩下的对象数组数据");