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

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

[[407276]]

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

需求概述

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

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

朴素版本

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

输出是:

  1. > 1 
  2. > 2 
  3. > 3 
  4. false 

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

Array.prototype.every()

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

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

于是:

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

输出:

  1. > 1 
  2. > 2 
  3. false 

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

结合 map()

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

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

考虑使用 map 。

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

输出:

  1. > 1 
  2. > 2 
  3. > 3 
  4. false 

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

 

责任编辑:姜华 来源: Piper蛋窝
相关推荐

2024-09-23 12:35:49

2022-10-12 23:39:46

Java接口属性

2022-10-11 09:33:04

Java异常Exception

2018-11-30 15:17:38

CPUCache缓存行

2010-03-30 08:36:26

Java框架StrutsSpring

2020-12-22 14:11:45

JS forEach()map()

2021-12-14 07:40:07

C# 异步流结合体

2009-09-21 16:59:29

Array扩展

2012-06-15 09:56:40

2021-03-19 16:05:33

CSS CSS 属性CSS 基础

2016-09-12 17:19:51

JavaScriptArray操作技巧

2010-10-09 09:18:14

JavaScriptArray对象

2020-12-09 18:36:28

ObjectArrayJavaSc

2021-03-26 00:00:05

​JavaMap设计

2021-05-08 10:36:31

开发Java Map

2022-02-09 16:02:26

Go 语言ArraySlice

2022-10-10 09:00:35

ReactJSX组件

2024-08-30 08:35:03

JavaScript切片数组

2022-01-25 08:36:29

array.flat映射函数数组

2021-11-11 14:50:01

JavaScriptarry编程开发
点赞
收藏

51CTO技术栈公众号