<!–
巧技拾遗 | 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()”) 函数来解决。
依据 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
。
我是小拍,欢送关注我,相似这种奇妙技巧的拾遗当前会常常更新哈。麻烦点下点赞和在看~