React：如何从对象数组中提取isCheck为true的list值并分组到数组

要提取所有isCheck为true的list值并合并到一个数组中，你可以通过以下两种简洁的方式实现：

方法一：使用flatMap（推荐） #

flatMap可以同时完成映射和扁平化操作，直接得到目标数组：

const checkedLists = stateDataListTask.flatMap(item => 
  item.newList.filter(subItem => subItem.isCheck).map(subItem => subItem.list)
);

步骤说明： #

1. 遍历主数组中的每个对象；
2. 对每个对象的newList进行过滤，保留isCheck为true的项；
3. 将过滤后的项映射为仅包含list字符串的数组；
4. flatMap自动将所有子数组扁平化合并为一个数组，且会忽略无匹配项的空数组。

方法二：使用reduce #

如果你需要更显式的逻辑控制，可以使用reduce：

const checkedLists = stateDataListTask.reduce((acc, currentItem) => {
  const currentChecked = currentItem.newList
    .filter(subItem => subItem.isCheck === true)
    .map(subItem => subItem.list);
  return acc.concat(currentChecked);
}, []);

步骤说明： #

1. 初始化一个空数组作为累加器；
2. 对每个主对象，过滤并映射得到当前对象的所有已勾选list值；
3. 将当前结果合并到累加器中；
4. 最终累加器即为所有符合条件的list值组成的数组。

示例输出 #

针对你的输入数据，两种方法都会返回：

['list 1', 'list 2.1']

内容的提问来源于stack exchange，提问作者Muhammad Ashraf