slice or splice
一次在群里聊天，一个小伙伴甩了这张图在群里。我直接就愣住了，这不就是我的常规操作吗？
因为总是间歇性的分不清数组的slice 和 splice 方法，几乎每次用到的时候，都怀疑自己记错了，然后就会去google一下。
对于一个自称为资深前端架构师的我来说，这... 就太致命了。要是被别人知道了，岂不是会觉得我太菜？
为了把锅甩出去，证明这不是我的问题，我走向了重写这两方法的求知之旅。
1
重写 slice
重写之前，得先搞清楚 slice 方法有什么用。
查阅资料，了解到这个方法：slice 函数中传入原数组的起点索引位置与终点位置，返回一个新数组。资料里还专门强调了，原数组不能被改变。
在 console 面板先尝试使用看看。
发现 slice 方法接收两个可选参数，一个开始一个结束「不包含」。
虽然理想情况下，都是传入数字，这样逻辑处理就非常简单。但是就肯定有杠精使用者，偏偏要传入字符串啊，数组啊，对象啊。所以内部应该还需要做一些异常处理。
image.png
通过验证发现，当传入不同类型的参数时，情况还真不一样，这个就有毒！
先说第二个参数 end。
- 不传参数时，默认到数组的最后截止
- 传入数字字符串等能被隐式转成数字的，就被直接当成数字处理
- 传入 1a 这种，通过 parseInt 能变成数字的，被当成是 1
- 传入完全不能隐式转换成数字的，例如 1A，对象等，直接返回了空数组
我也不知道为什么，就过了个周末，验证结果发生了变化，之前传入 1a这种，我明明记得是被认为成1的，结果今天验证发现不是这样。感觉记忆出现了混乱... 我甚至连方法都写好了...
// 废弃，仅供娱乐阅读 Array.prototype.slice = function(start, end) { if (typeof start != 'number') { return this } let _start = start if (start < 0) { _start = this.length + start; } let _end = end if (typeof end == 'undefined') { _end = this.length } else if(isNaN(parseInt(end))) { return [] } else { _end = parseInt(end) } if (_end < 0) { _end = this.length + _end; } const _array = [] for (let i = 0; i < this.length; i++) { if (i >= _start && i < _end) { _array.push(this[i]) } } return _array; }
再说第一个参数 start
第一个参数的规则，也跟我上周验证的结果不一样... 哭了
这次验证之后发现，第一个参数的处理，跟第二个参数一致了。我明明清晰的记得是不一样的，当时我还在心里吐槽实现这个数组方法的程序员脑壳有包呢
我严重怀疑，周末更新的chrome浏览器版本里，对 slice 进行了重构。没更新的大佬帮我试试看，是不是我记忆出现了问题...
不管怎么样，既然处理规则发生了变化，就只能重新写。调整之后如下：
Array.prototype.slice = function(start, end) { let _start = isNaN(+start) ? 0 : +start if (start < 0) { _start = this.length + start; } let _end = isNaN(+end) ? 0 : +end if (_end < 0) { _end = this.length + _end; } if (end == undefined) { _end = this.length } const _array = [] for (let i = 0; i < this.length; i++) { if (i >= _start && i < _end) { _array.push(this[i]) } } return _array; }
2
重写 splice
了解后发现，splice 方法和 slice 方法，还真有点类似。可是他们的目的却不一样。
slice ，是为了获取到数组中的某一段。
splice ，是想要替换数组中的某一段。意味着会修改原数组。
如图，从对参数的定义，就有了区别。第一个参数仍然是表示起始位置。第二个参数就变成了，deleteCount，要被替换掉的数组子项数量。
基于这个点，我严重怀疑，slice 和 splice，在最初的 api 设计并实现的过程中，这两个方法，不是同一个人写的！
从目的上来考虑这两种参数方式，我们会发现，其实本质是一样的，都是为了定位起点和终点。然后再进行切割。
可是为什么相似的场景，要使用两种不同的方式？推断结果就是，这是两个人分别写的 api，因此出现了分歧。而一直使用至今。
除此之外，对于第二个参数值为 undefined 时的处理逻辑不一样。这也从侧面印证了我的猜测。
皇天不负苦心人，我时常分不清的原因终于找到了：api 设计不合理。
反正先不管，大概重写一下 splice 方法。代码如下
Array.prototype.splice = function(start, deleteCount, ...items) { const args = arguments; if (arguments.length == 0) { return [] } let _array = [] let _start = isNaN(+start) ? 0 : +start let _count = isNaN(+deleteCount) ? 0 : +deleteCount if (start < 0) { _start = this.length + start } if (_count < 0) { _count = 0 } if (args.length == 1) { _count = this.length - _start } // 这里的目的是将splice之前，之后，以及要插入的项拼合成一个数组，偷个懒直接用slice方法，方式还有很多 const _a = this.slice(0, _start) const _b = this.slice(_start + _count) const sp = this.slice(_start, _start + _count); const b = _a.concat(items).concat(_b) this.length = b.length if (b.length > 0) { for (let i = 0; i <= b.length; i++) { if (b[i]) { this[i] = b[i] } } } return sp }
验证之后和原生 splice 方法表现一致，重写通过。
3
更优方案
既然我们已经成功甩锅，认为数组方法api设计不合理，导致了我容易混淆他们的使用。那么更好的方式是什么？如何设计api，能够让大家在使用时，不会存在记不清的疑问？
我的方案如下：
Array.prototype.splice = function(start, end, items) { // items参数规定为数组，通过判断是否传入第三个参数，来决定走什么逻辑 // ... todo // 具体实现，增加判断条件，把上面两个方法，逻辑重组一下，就可以了，偷个懒，此处省略 }
将两个方法，合并为同一个方法。
第一个参数表示起始位置 第二个参数表示结束位置 通过判断是否传入第三个参数来决定是否要修改原数组。
如果没有传入，则走原 slice 的逻辑。如果传入了，则走原splice 的逻辑。
唯一的一点小瑕疵，就是当我们要走 splice 逻辑时，start end 就成为了必传参数。小瑕疵，忽略不计。
注意：
我们可以修改，增加数组的原生方法，以及其他内置对象的属性跟方法。但是通常情况下，在项目中都非常不建议这样做。
因为这样做的风险，就是可能会覆盖数组原本的方法。而且你实现的，极大概率各方面都没有原生方法的好。
从多人协作的项目管理的角度来说，如果一旦开了这个口子，大家都在往数组对象上扩展新方法，那么就容易造成混乱，甚至修改了别人的逻辑。
我们常用的工具函数库 lodash，就扩展了许多数组方法，但是是把这些数组方法，挂在 lodash 对象上的，而不是直接在 Array 对象中新增。
其实就是担心使用者乱搞。全局变量也是同样的道理。
