用心感受数组中强大的splice方法

最近在梳理JavaScript数组这一块知识点时,想到了splice方法。于是在睡觉之前脑海中一遍遍走过,其实在我的日常工作中,感觉splice是使用次数远远不及forEach、filter这种。但我知道splice是数组中一个很重要又很强大的方法,于是今天早起,就想找个时间和大家好好说道说道。

一、概念

首先 splice数组 的一个方法注意它的使用会改变原数组的值,根据我们工作中的实际情况,它可以接收三个参数

splice的实际作用就是对原数组进行增加删除修改

二、参数使用

2.1 一个参数

  1. 一个参数 的情况,多用来进行截取(相当于删除元素组中的一些项),标识从n开始一直到数组末尾,这种情况的返回值是一个我们截取值的数组

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.splice(2);
    console.log(arr); // [1, 2];
    console.log(newArr); // [3, 4, 5];
  2. 这里可能有想伙伴要说我想截取某一部分怎么办,那我们就要使用slice方法啦。

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.slice(2, 4);
    console.log(arr); // [1, 2, 3, 4, 5];
    console.log(newArr); // [3, 4];

    注意 :slice改变原数组,再一点就是这个取件是前闭后开的。

  3. splice也可以接收一个负数

    当我们传递的参数为-1时,此时指向的是数组的最后一项,这里我想获取数组的最后三项也可以这样写。

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.slice(-3);
    console.log(arr); // [1, 2, 3, 4, 5];
    console.log(newArr); // [3, 4, 5];

2.2 两个参数

  1. 两个参数是删除的意思,标识从下标n开始删除m个项,返回值是一个删除的数组。比如我们删除下标2的值。

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.splice(2, 1);
    console.log(arr); // [1, 2, 4, 5];
    console.log(newArr); // [3];
  2. 两个参数也是支持负数

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr); // [1, 2, 3, 4, 5];
    
    const newArr = arr.splice(-1, 1);
    console.log(arr); // [1, 2, 3, 4];
    console.log(newArr); // [5];

3.3 三个参数(大于等于三个参数)

splice(start , deleteCount, item1, item2, ... )

我们先来说两种情况,分别解释一下每个参数的作用。

  • start大于0时

    • deleteCount0 时,不删除只添加。在start位置前添加item1, ..., itemN的数
    • deleteCount > 0 删除且添加,删除从start位置开始的数,deleteCount为删除的个数,并且在start位置前添加item1, ..., itemN的数。
  • start小于0时,最后一个数为 -1

    • deleteCount0 时 不删除只添加,在-start位置前添加item1, ..., itemN的数

    • deleteCount > 0 删除且添加,删除从-start位置开始的数,deleteCount为删除的个数,并且在-start位置前添加item1, ..., itemN的数

      js 复制代码
      // 新增
      const arr = [1, 2, 3, 4, 5];
      console.log(arr); // [1, 2, 3, 4, 5];
      
      const newArr = arr.splice(2, 0, 6);
      console.log(arr); // [1, 2, 6, 3, 4, 5];
      console.log(newArr); // [];
      
      // 替换
      const arr = [1, 2, 3, 4, 5];
      console.log(arr); // [1, 2, 3, 4, 5];
      
      const newArr = arr.splice(2, 1, 6);
      console.log(arr); // [1, 2, 6, 4, 5];
      console.log(newArr); // [3];

三、总结

今天是整理了一下数组中splice中的用法,一般我们就是使用其中的删除替换。目的是让大家对splice加深印象,在面试中可能会被提问到。

相关推荐
@大迁世界2 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙3 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump3 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD3 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~3 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro3 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin4 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马4 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610374 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610374 小时前
亲测好用!简单实用的图片尺寸调整工具
前端