用心感受数组中强大的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加深印象,在面试中可能会被提问到。

相关推荐
excel6 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友8 小时前
什么是API签名?
前端·后端·安全
会豪10 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子10 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶10 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子10 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_10 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233311 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin11 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js