关于javascript:巧技拾遗-JavaScript-中-Arrayevery-和-Arraymap-的巧妙结合

<!–
巧技拾遗 | 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。

我是小拍，欢送关注我，相似这种奇妙技巧的拾遗当前会常常更新哈。麻烦点下点赞和在看~