这几天一直在学习vue3+TypeScript中表单验证的一个小例子。看到一个实现的时候，觉得很巧妙。需求概述我们有一个存储函数的列表funcArr，例如funcArr=[func1,func2,...]。这些函数都是()=>boolean，即没有参数，返回值为布尔值。我们期望funcArr中的每个函数在提交表单时执行，如果这些函数通过验证，我们的主要逻辑为true，否则为false。原始版本func1=()=>{console.log(1);returntrue;}func2=()=>{console.log(2);returnfalse;}func3=()=>{console.log(3);returntrue;}funcArr=[func1,func2,func3];result=true;for(vari=0;i1>2>3>false这种做法显然有点扯淡，根本没有使用JavaScript特性和函数式编程的思想。Array.prototype.every()一般来说，我们使用Array.prototype.every()[1]函数来解决上面的需求。根据MDN的描述：every用于检查每个函数是否都通过了，最后返回一个布尔值。所以：func1=()=>{console.log(1);returntrue;}func2=()=>{console.log(2);returnfalse;}func3=()=>{console.log(3);返回真;}funcArr=[func1,func2,func3];result=funcArr.every(func=>func());console.log(result)output:>1>2>false可以注意到一个现象：当每一个发现一个元素验证失败时，它就停止检查其他元素。结合map()，有时候我们的funcArr中的函数不仅仅只是简单的返回一个布尔值，还会有其他的逻辑比如修改一些响应变量。因此，我们希望every能执行所有函数，即使发现其中一个函数返回false。考虑改用地图。func1=()=>{console.log(1);returntrue;}func2=()=>{console.log(2);returnfalse;}func3=()=>{console.log(3);returntrue;}funcArr=[func1,func2,func3];result=funcArr.map(func=>func()).every(res=>res);console.log(result)output:>1>2>3>falseeveryin函数就像一个漏斗，依次过滤所有的值，有一个为false就返回false，否则为true。
