JavaScript中filter无匹配结果时如何传递状态给map实现错误提示

Array.prototype.map 仅会对数组中存在的元素执行回调逻辑，当filter返回空数组时，后续的map没有可遍历的元素，因此不会触发任何你写在map回调里的逻辑，包括错误提示和打印操作。

方案1：先存筛选结果再判断（推荐，可读性最高） #

先把filter的执行结果保存到变量，判断长度后分别处理：

const tasks = [
  {
    'name'     : 'Write for Envato Tuts+',
    'duration' : 120
  },
  {
    'name'     : 'Work out',
    'duration' : 60
  },
  {
    'name'     : 'Procrastinate on Duolingo',
    'duration' : 240
  }
];

// 先执行筛选
const filteredTasks = tasks.filter(x => x.duration >= 400);
let difficult_tasks1;

if (filteredTasks.length) {
  // 有匹配项时执行map逻辑
  difficult_tasks1 = filteredTasks.map(x => {
    console.log(x);
    return x;
  });
} else {
  // 无匹配项时触发错误提示
  alert("error");
  // 可以自定义返回内容，比如返回空数组、默认值数组等
  difficult_tasks1 = [];
}

console.log(difficult_tasks1.length)

方案2：保持链式调用写法 #

如果需要保留链式调用的代码风格，可以在筛选后插入逻辑给空数组插入占位标识，最后再过滤掉占位内容即可：

const difficult_tasks1 = (() => {
  const res = tasks.filter(x => x.duration >= 400);
  // 空数组时插入null作为无匹配的标识
  return res.length ? res : [null];
})()
.map(x => {
  if (x === null) {
    alert("error");
    // 无匹配时返回undefined，后续过滤掉
    return;
  }
  console.log(x);
  return x;
})
// 过滤掉无匹配场景下的占位返回值
.filter(Boolean);

console.log(difficult_tasks1.length)

普通场景优先选方案1，没有多余的遍历操作，性能更好，逻辑也更直观易懂。

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