巧技拾遗 | JavaScript 中 Array.every 和 Array.map 的巧妙结合

这几天在跟着学一点 vue3 + TypeScript 中表单验证的实例，看到一个实现，觉得非常巧妙。

需求概述

我们有一个列表 funcArr ，里面存放函数，比如 funcArr = [ func1, func2, ... ] 。这些函数都是 () => boolean 即无参数、返回值为布尔值的。

我们期望在提交表单时，执行 funcArr 中的每一个函数，如果这些函数都通过验证，则我们的主逻辑获取到 true ，否则是 false 。

朴素版本

func1 = () => { console.log(1); return true; } 
func2 = () => { console.log(2); return false; } 
func3 = () => { console.log(3); return true; } 
 
funcArr = [func1, func2, func3]; 
 
result = true; 
for (var i = 0; i < funcArr.length; i ++ ) 
{ 
  if (!funcArr[i]( "i")) result = false; 
} 
 
console.log(result) 

输出是：

> 1 
> 2 
> 3 
> false 

这种做法显然有点瞎扯了，完全没有用到 JavaScript 特性和函数式编程的思想。

Array.prototype.every()

一般来讲，有上述需求，我们用 Array.prototype.every()[1] 函数来解决。

根据 MDN 的描述：every用于检测是否每个函数都通过，并且最终返回 一个 布尔值。

于是：

func1 = () => { console.log(1); return true; } 
func2 = () => { console.log(2); return false; } 
func3 = () => { console.log(3); return true; } 
 
funcArr = [func1, func2, func3]; 
 
result = funcArr.every(func => func()); 
 
console.log(result) 

输出：

> 1 
> 2 
> false 

可以注意到一个现象：当every发现有一个元素没有通过验证时，它就不再继续检查其他元素了。

结合 map()

有时候，我们的 funcArr 中的函数，不仅仅是单纯的返回一个布尔值，其中还有其他逻辑如修改一些响应式变量的作用。

因此，我们希望 every 能够执行完毕所有函数，即便发现其中某一个是 return false 了的。

考虑使用 map 。

func1 = () => { console.log(1); return true; } 
func2 = () => { console.log(2); return false; } 
func3 = () => { console.log(3); return true; } 
 
funcArr = [func1, func2, func3]; 
 
result = funcArr.map(func => func()).every(res => res); 
 
console.log(result) 

输出：

> 1 
> 2 
> 3 
> false 

every在其中的作用，像是一个漏斗，把所有的值依次过滤，有一个 false 就返回 false ，否则是 true 。