快10年的老前端了,我还分不清 slice 和 splice,这到底是谁的锅

简介: 快10年的老前端了,我还分不清 slice 和 splice,这到底是谁的锅

slice or splice


一次在群里聊天,一个小伙伴甩了这张图在群里。我直接就愣住了,这不就是我的常规操作吗?


因为总是间歇性的分不清数组的slice 和 splice 方法,几乎每次用到的时候,都怀疑自己记错了,然后就会去google一下。


对于一个自称为资深前端架构师的我来说,这... 就太致命了。要是被别人知道了,岂不是会觉得我太菜?


为了把锅甩出去,证明这不是我的问题,我走向了重写这两方法的求知之旅。


1


重写 slice


重写之前,得先搞清楚 slice 方法有什么用。


查阅资料,了解到这个方法:slice 函数中传入原数组的起点索引位置与终点位置,返回一个新数组。资料里还专门强调了,原数组不能被改变。


在 console 面板先尝试使用看看。

image.png

发现 slice 方法接收两个可选参数,一个开始一个结束「不包含」。


虽然理想情况下,都是传入数字,这样逻辑处理就非常简单。但是就肯定有杠精使用者,偏偏要传入字符串啊,数组啊,对象啊。所以内部应该还需要做一些异常处理。

image.png

image.png


通过验证发现,当传入不同类型的参数时,情况还真不一样,这个就有毒!


先说第二个参数 end。

image.png

  • 不传参数时,默认到数组的最后截止
  • 传入数字字符串等能被隐式转成数字的,就被直接当成数字处理
  • 传入 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 ,是想要替换数组中的某一段。意味着会修改原数组。

image.png

如图,从对参数的定义,就有了区别。第一个参数仍然是表示起始位置。第二个参数就变成了,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 对象中新增。


其实就是担心使用者乱搞。全局变量也是同样的道理。

目录
打赏
0
0
1
0
2
分享
相关文章
前端知识笔记(九)———slice、splice、split 的使用
前端知识笔记(九)———slice、splice、split 的使用
187 0
前端学习案例3-数组上的方法总结3slice
前端学习案例3-数组上的方法总结3slice
67 0
前端学习案例3-数组上的方法总结3slice
前端学习案例3-数组的删改方法1slice
前端学习案例3-数组的删改方法1slice
76 0
前端学习案例3-数组的删改方法1slice
前端知识案例50-javascript基础语法-数组剪切slice
前端知识案例50-javascript基础语法-数组剪切slice
80 0
前端知识案例50-javascript基础语法-数组剪切slice
前端项目实战243-利用splice改变原数组
前端项目实战243-利用splice改变原数组
79 0
前端项目实战179-移除操作可以用splice进行移除
前端项目实战179-移除操作可以用splice进行移除
103 0
快10年的老前端了,我还分不清 slice 和 splice,这到底是谁的锅
因为总是间歇性的分不清数组的slice 和 splice 方法,几乎每次用到的时候,都怀疑自己记错了,然后就会去google一下。 对于一个自称为资深前端架构师的我来说,这... 就太致命了。要是被别人知道了,岂不是会觉得我太菜? 为了把锅甩出去,证明这不是我的问题,我走向了重写这两方法的求知之旅。
158 0
快10年的老前端了,我还分不清 slice 和 splice,这到底是谁的锅
#yyds干货盘点# 【js学习笔记十二】前端数组方法slice
#yyds干货盘点# 【js学习笔记十二】前端数组方法slice
277 0

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    84
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    17
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    4
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    46
  • 5
    详解智能编码在前端研发的创新应用
    19
  • 6
    巧用通义灵码,提升前端研发效率
    42
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 8
    智能编码在前端研发的创新应用
    37
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    20
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等