1. 起因
数组 Array
的 api
是个老生常谈的话题了,本篇小记中也是社区已有的知识了,只是对自己学习、了解到的知识进行阶段性梳理,攻克一下薄弱环节。
在没有梳理前,我对 slice
和 splice
两个方法总是傻傻分不清楚,原谅我的场景里只有map
, filter
, forEach
好不容易碰到一次数组里需要删除元素的需求,都要现找代码,或是自己在控制台里面试一下,确实有些汗颜。
除此之外,就是 reduce
方法了,他从诞生以来,名声就很响亮了,似乎其他方法能做到的事情他都没有问题。但是参数的数量让他没能成为我快速开发的首选,有时候宁愿在循环外面 let sum
,再利用 for
循环累加,也不想用 reduce
优美的 api
,确也不该,趁此机会一块了解一下。
2. 分清楚 splice
和 slice
我也很好奇广大开发者是怎么分清楚 slice
和 splice
的,经过收集,目前为止我知道了 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)
复制代码
其次有 initialValue
的 reduce((prev, cur, index, arr) => {}, initialValue)
认为,第一次取到的不是数组中的元素,所以命名为 prev
。
而没有 initialValue
的 reduce((cur, next, index, arr) => {})
认为,第一次取到的是数组的第一位,所以命名为 cur
这里借用 MDN
中对 reduce
参数的定义
arr.reduce(callback(accumulator, currentValue, index?, array?), initialValue)
复制代码
可能 accumulator 才是对第一个参数最准确的定义了吧。
reduce
函数还有很多强大的功能,先不展开了,社区中有很多文章专门讲过~
4. 总结
对自己了解,但不熟悉的知识进行梳理,可以温故知新,扎实基础。
今日的小记就到这里了,祝大家生活愉快,编码顺利? !