阅读 419

【知识梳理】JS 数组 API 小记

1. 起因

数组 Arrayapi 是个老生常谈的话题了,本篇小记中也是社区已有的知识了,只是对自己学习、了解到的知识进行阶段性梳理,攻克一下薄弱环节。

在没有梳理前,我对 slicesplice 两个方法总是傻傻分不清楚,原谅我的场景里只有map, filter, forEach 好不容易碰到一次数组里需要删除元素的需求,都要现找代码,或是自己在控制台里面试一下,确实有些汗颜。

除此之外,就是 reduce 方法了,他从诞生以来,名声就很响亮了,似乎其他方法能做到的事情他都没有问题。但是参数的数量让他没能成为我快速开发的首选,有时候宁愿在循环外面 let sum,再利用 for 循环累加,也不想用 reduce 优美的 api,确也不该,趁此机会一块了解一下。

2. 分清楚 spliceslice

我也很好奇广大开发者是怎么分清楚 slicesplice 的,经过收集,目前为止我知道了 4 种方法。

2.1. 有无副作用

第一类小伙伴上来就告诉我,两个方法最清楚的定义了。看来确实是我最开始学的基础没打好,如果最开始学习的时候就把这两个区分的很清楚,估计这 20 年是不会忘了。

splice 会改变原数组

slice 不改变原数组

2.2. 英语该学学了

第二类小伙伴以掘友为代表,号召我好好学习英语,谢谢掘友!

splice v. 捻接

slice v. 切

2.3. 讲真我只用 slice

第三类小伙伴表示,splice 是什么,我基本没用过,我只用 slice

这简直是不讲武德,只用一个就不用区分了。

2.4. 参数多的方法名更长

这个办法是我自己为了巩固记忆自己想的。

对于我而言,我知道其中有一个方法是2个参数,且2个参数的方法只能用来做截取。

slice(start, end)

  • 开始位置
  • 结束位置

splice(start, length, ...item)

  • 开始位置
  • 删除长度
  • 拼接的元素

3. 认真看看 reduce

最早接触 reduce 的时候就知道他可以做累加了。隐约记得函数里面可以拿到,prev, next, index 什么的。

当时自己就觉得奇怪,怎么 prev 后面就是 next 呢,这样怎么做累加,不是把中间的 current 漏了过去。现在认真的看看才知道当时的自己有多么的不仔细。

网上通用的教程有两种写法

  • reduce((cur, next, index, arr) => {})
  • reduce((prev, cur, index, arr) => {}, initialValue)

当时没有仔细区分,每次都复制粘贴,所以就记成了 prev next

其实这两种写法都只包含了 reduce 函数的一层意思。

首先两种参数的明明都暴露一个问题,认为 prev cur next 是一致的对象,没有考虑进行的累计操作,可能利用了数组中的对象某一个属性,比如:

[{x: 1}, {x: 2}].reduce((prev, cur) => prev + cur.x, 0)
复制代码

其次有 initialValuereduce((prev, cur, index, arr) => {}, initialValue) 认为,第一次取到的不是数组中的元素,所以命名为 prev

而没有 initialValuereduce((cur, next, index, arr) => {}) 认为,第一次取到的是数组的第一位,所以命名为 cur

这里借用 MDN 中对 reduce 参数的定义

arr.reduce(callback(accumulator, currentValue, index?, array?), initialValue)
复制代码

可能 accumulator 才是对第一个参数最准确的定义了吧。

reduce 函数还有很多强大的功能,先不展开了,社区中有很多文章专门讲过~

4. 总结

对自己了解,但不熟悉的知识进行梳理,可以温故知新,扎实基础。

今日的小记就到这里了,祝大家生活愉快,编码顺利💗 !

文章分类
前端
文章标签