如何基于嵌套数组数据过滤JavaScript数组？

问题描述 #

给定如下数组：

const x = [
  {label: 'a', data: [0,0]},
  {label: 'b', data: [0,0]},
  {label: 'c', data: [0,1]},
  {label: 'd', data: [0,1]},
]

需要过滤掉data属性全为0的对象，最终得到：

const x = [
  {label: 'c', data: [0,1]},
  {label: 'd', data: [0,1]},
]

尝试了以下代码但未达到预期：

const result = x.filter((x) => {
    return x.data.filter((value) => value > 0);
});

问题原因 #

你的代码逻辑出错的核心在于：Array.filter()返回的是一个数组，而在JavaScript中，空数组属于真值（truthy）。也就是说，即使data全为0，x.data.filter(value => value > 0)会返回空数组[]，这个值在filter的回调里会被判定为true，导致原本应该被过滤掉的对象被保留了下来。

正确解法 #

可以使用Array.some()或者Array.every()来实现需求：

方法1：使用some() #

some()会检测数组中是否存在至少一个元素满足指定条件，只要有一个满足就返回true，正好符合我们要保留data中存在大于0元素的对象的需求：

const result = x.filter(item => item.data.some(value => value > 0));

方法2：使用every()取反 #

every()会检测数组中所有元素是否都满足指定条件，我们取反item.data.every(value => value === 0)，就表示“不是所有元素都是0”，也就是保留非全0的对象：

const result = x.filter(item => !item.data.every(value => value === 0));

两种方法都能得到你期望的结果：

// result输出：
[
  {label: 'c', data: [0,1]},
  {label: 'd', data: [0,1]},
]

内容的提问来源于stack exchange，提问作者Peter Boomsma