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

Posted Piper蛋窝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了巧技拾遗 | JavaScript 中 Array.every 和 Array.map 的巧妙结合相关的知识,希望对你有一定的参考价值。

Yeshi Kangrang @ unsplash.com

这几天在跟着学一点 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

我是小拍,欢迎关注我,类似这种巧妙技巧的拾遗以后会经常更新哈。麻烦点下点赞和在看~

以上是关于巧技拾遗 | JavaScript 中 Array.every 和 Array.map 的巧妙结合的主要内容,如果未能解决你的问题,请参考以下文章

(转)javascript 奇淫巧技44招

[javascript 实践篇]——那些你不知道的“奇淫巧技”

JavaScript语言精髓之语法概要拾遗(转)

.NET基础拾遗字符串集合和流2

拾遗理解Javascript中的Arguments

源码解析中看到的奇淫巧技