美文网首页
函数式实现JS中Array的方法

函数式实现JS中Array的方法

作者: LeDng | 来源:发表于2019-05-20 11:25 被阅读0次

最近工作的事情太多,好几个项目交替在一起,导致这一块的精更没有顺利的进行下去,今天抽空进行下去。对于数组的方法通过函数式来实现:在这里我将一步一步的把这篇文章更新完成。


Array的forEach方法函数式的实现。

首先我们进行定义:

aforEach

在对数组的forEach进行模拟,我们可以清晰的知道,这就是一个简单的数组循环,没有任何觉得高端的地方。正是这样的。他没有任何关于外界交互。他就是纯粹在自我的世界里。输入什么就会得到制定的输出。

下面开看他的测试(以图例说明):

测试例子

看例子就知道了。结果就不用在这里贴出来了。接下来我们思考如果实现map。


Array的map方法函数式的实现

别的不说我们先上定义好的代码,然后进行一步一步的分析

map

在代码层面上,只是使用const定义一个map变量,来接收一个函数。与froEach不同的是,map返回值是一个数组对象。如何实现这个功能呢?当然是在纯粹的地方干着纯粹的事情。在方法中定义一个空数组rerule来存储我们需要最后返回的对象,这样就能实现map的纯粹返回对象的功能了。

接下来我们看其测试用例:

map用例

不难发现,跟使用array的map方法一摸一样。


Array的filter方法的函数式实现

实现过map的方法之后,我们发现map是返回依赖原始数组的每一项组成的新对象数组的返回值。但是无法过滤不需要的状态。恰好filter实现完美实现这一块的需求的。

继续看他的定义:

filter

对比map的代码发现,只有再循环中的判断不同, (fn(array[i], i)) ? rerult.push(array[i]) : undefined; 仔细看这么代码我们很简单的就回发现,在回调函数中不满足条件的会返回undefined,满足条件的会被原样返回。

接下来看测试用例

filter用例

这里大家会发现,跟使用array的filter方法一样,简单有好用。还可以深入其底层实现。


Array的concat方法的函数式实现

在很多时候我们需要把数组对象中的某一个属性为array的所有项合并到一个单独的数组中进行管理,我应该如何做呢?

来我们先上代码:

concat

接下来我们直接更上我们的测试代码:

concat用例

接着更上运行结果:

结果

今天就更新到这里,也没有对里面的代码做一步一步的分析,找个时间会补上。

欢迎大家关注我。

相关文章

  • 函数式实现JS中Array的方法

    最近工作的事情太多,好几个项目交替在一起,导致这一块的精更没有顺利的进行下去,今天抽空进行下去。对于数组的方法通过...

  • 高阶组件

    高阶函数:接受一个或多个函数并返回一个函数 JS中,array的map、filter、reduce等方法就是高阶函...

  • Java中的回调函数为什么只能访问final变量?

    经常写JS的话对函数式编程应该不陌生,JS是天然支持函数式的,而在Java中,需要用一个接口来实现伪函数编程,类似...

  • 快速将字符串变成数组

    方法一:构造函数 方法二:js方法(split) 方法三:Array.from() 方法四:Object.valu...

  • swift 3.0 Array所涉及的方法大全

    导语 近日一直在研究函数式编程,看Array函数使用,特想总结一下Array各种函数方法的使用 joined 拼接...

  • 深入浅出Rxjs笔记 一

    一.函数式编程 函数式编程要求: 声明式 纯函数 数据不可变js 不算纯粹意义上的函数式编程语言,但是,在js中函...

  • js数组方法大全

    js数组方法大全 JavaScript中创建数组有两种方式(一)使用 Array 构造函数: (二)使用数组字面量...

  • PHP在数组中搜索键值,并返回对应的键名

    实现对应的功能可以使用PHP中的 array_search() 函数 实例1:函数 array_search 在 ...

  • function详解

    1、函数的基础操作 函数指实现某一个功能的方法,也叫子程序,OOP中的方法JS中函数有两部分:创建函数和执行函数创...

  • js数组

    创建js数组的两种方法第一种:使用Array构造函数var nums = new Array()可以直接向Arra...

网友评论

      本文标题:函数式实现JS中Array的方法

      本文链接:https://www.haomeiwen.com/subject/jynhzqtx.html