巧技拾遗 | 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
。
我是小拍,欢迎关注我,类似这种巧妙技巧的拾遗以后会经常更新哈。麻烦点下点赞和在看~
巧技拾遗 | JavaScript 中 Array.every 和 Array.map 的巧妙结合相关推荐
- JavaScript中创建数组(Array)对象的两种方式
一.使用Array构造函数创建数组对象 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- js中Object类型和Array类型的变量被赋值(复制)给其他变量后,修改被赋值(复制)的新变量的值,会影响原始变量的值,这是为什么呢?
JavaScript中的Object和Array都是指针变量类型,例如我声明 let obj={a:1};let arr=[1,2,3]; 其中的obj和arr存放的仅仅是对应的对象和数组内容所存放的 ...
- django中的for循环_深入了解 JavaScript 中的 for 循环
在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...
- Javascript中for循环
在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...
- JavaScript中 queue(队列)的应用与实现
阅读提示:文章大概字数15300,较详细的介绍了队列在js中的应用和作用,实现了几个常见算法用队列的代码 queue队列的应用与实现 前言 一.queue(队列)是什么? 1.生活中的队列 2.程序中 ...
- Javascript 中 Array.push 要比 Array.concat 快 945 倍
[译] Javascript 中 Array.push 要比 Array.concat 快 945 倍!
- 详解Javascript中的Array对象
本文地址:http://luopq.com/2016/04/01/Array-in-Javascript/,转载请注明 在上一篇文章中,我们详细介绍了Object对象.在这一篇文章中,我们来说说Arr ...
- [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...
- 广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
最新文章
- Docker是世界上最牛逼的CaaS!
- 点击form 表单中的button导致页面刷新问题
- [NOTE] DSVW靶场练习笔记
- 【数据分析】你一定要掌握的Python七种数据清洗方法
- P3924 康娜的线段树
- what is loop switch
- android手机抓包工具 tcp协议,Android常用抓包工具之TcpDump
- [已解决 2020年]你的支付授权失败。请核对你的信息并重试,或尝试其他支付方式。请联系你的银行了解更多信息
- hyperledger fabric 2.3.3 搭建教程
- archpr说文件不是rar文件_PDF压缩 | 从此PDF“文件过大”再也不是难题
- 微服务中的服务发现是什么?
- HADOOP读写性能测试
- Mikrotik路由器(routerOS)调试环境搭建
- 气象站里的超级计算机,中国气象局高性能计算环境.pdf
- mysql优化之query_cache_type的DEMAND参数介绍
- 计算机专业考研390分是什么水平,考研初试390分被淘汰,复试到底发生了什么?...
- torchtorchvision对应版本
- 人体十二经络穴位口诀
- 仿360一键清理实现(一)
- 国产数据库名录和产品信息一览-2023
热门文章
- 日语口语中需要注意的问题~ 不定期更新
- java中的linked_为Java实现LinkedArray
- 【Linux】创建逻辑卷管理(LVM)
- 关于Windows 1803版本内核隔离打开后无法关闭的解决方案
- org.apache.struts2.json.JSONException: java.lang.reflect.InvocationTargetException异常解决
- 项目遇到的问题总结(四):单页面首屏加载慢解决方案
- epel安装第三方扩展源后,运行yum报错的解决方案
- 传递给系统调用的数据区域太小。 (异常来自 HRESULT:0x8007007A)
- 使用HttpClient MultipartEntityBuilder 上传文件,并解决中文文件名乱码问题
- 解决 Chrome 下载不了东西 失败 - 已屏蔽 的问题