【前端知识点】JS中数组的splice方法和slice方法有什么不同

splice和slice方法

splice和slice的区别为:

  1. splice改变原数组,slice不改变原数组。
  2. splice除了可以删除之外,还可以插入。
  3. splice可传入多个参数,slice接受2个参数。

slice()

一、获取数组子集

Slice是JavaScript中的一个基础方法,用于从数组或字符串中提取一部分。 通过指定数组的起始索引和结束索引,我们可以获取从起始索引到结束索引之间的元素组成的子数组(不包含结束索引值)

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

上例中,通过arr.slice(1, 4)方法获取arr数组中下标从1到3之间的元素,得到的子数组为[2, 3, 4]。

需要注意的是slice方法并不会改变原数组,而是返回一个新数组。

除了上述的基本用法外,slice方法还有一些高级用法。例如,我们可以使用负数来指定起始索引和结束索引:

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

二、利用Slice拷贝数组

Slice方法除了可以用来获取原数组或字符串的子集,还可以用来拷贝一个数组(浅拷贝)。例如下面的例子:

js 复制代码
  const arr = [1, 2, 3];
  const copyArr = arr.slice();

上例中,我们没有指定参数,所以slice方法会默认从开头到末尾提取整个数组,从而返回一个和原数组完全相同的数组。使用slice方法拷贝数组非常方便,并且不会引起副作用。

splice()

一、splice方法的基本概念

JavaScript的数组是一种非常常用的数据类型,而splice方法则是对数组进行添加、删除、替换等操作的重要方法。使用splice方法可以对数组进行增删改等操作,并且不会破坏数组的长度。

css 复制代码
    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 1, 'pear');
    console.log(arr); // ['apple', 'pear', 'orange']

上述代码中,splice方法的第一个参数表示需要修改的起始位置,第二个参数表示需要删除的元素个数,第三个参数以及之后的参数则是需要插入的元素。在本例中,表示从位置1开始删除一个元素(即'banana'),然后插入一个'pear',最终数组变为['apple', 'pear', 'orange']。

二、splice方法的删除操作

splice方法最常用的操作就是删除数组中的元素。如果只传递第一个参数,则从该位置开始直接删除后面的所有元素。

ini 复制代码
    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1);
    console.log(arr); // ['apple']

上述代码中,splice方法只传递了一个参数1,表示从位置1开始直接删除后面的所有元素。最终结果为['apple']。

如果需要删除一个或多个元素,可以同时传递第一和第二个参数。

ini 复制代码
    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 2);
    console.log(arr); // ['apple']

上述代码中,splice方法传递了两个参数1和2,表示从位置1开始删除2个元素。最终结果为['apple']。

三、splice方法的插入操作

除了删除操作,splice方法还可以用于插入元素。如果只传递第一个参数,则不会删除任何元素,而是在该位置插入新的元素。

lua 复制代码
    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 0, 'pear', 'grape');
    console.log(arr); // ['apple', 'pear', 'grape', 'banana', 'orange']

上述代码中,splice方法传递了三个参数,第一个参数1表示从位置1开始插入元素,第二个参数0表示不删除任何元素,第三个及之后的参数则表示需要插入的元素。最终结果为['apple', 'pear', 'grape', 'banana', 'orange']。

四、splice方法的替换操作

同时传递第二和第三个参数,则可以进行替换操作。

lua 复制代码
    const arr = ['apple', 'banana', 'orange'];
    arr.splice(1, 1, 'pear', 'grape');
    console.log(arr); // ['apple', 'pear', 'grape', 'orange']

上述代码中,splice方法传递了三个参数,第一个参数1表示从位置1开始删除一个元素,第二个参数1表示删除一个元素,第三个及之后的参数表示需要插入的元素。最终结果为['apple', 'pear', 'grape', 'orange']。

五、splice方法的返回值

splice方法返回从数组中删除的元素组成的新数组。

ini 复制代码
    const arr = ['apple', 'banana', 'orange'];
    const deleted = arr.splice(1, 1, 'pear');
    console.log(deleted); // ['banana']

上述代码中,splice方法的返回值为删除的元素组成的新数组['banana']。

六、splice方法的注意事项

在使用splice方法时需要注意以下几点:

1、第一个参数必须是数字类型;

2、如果第一个参数为负数,则从末尾开始计算位置;

3、如果删除或插入的元素个数为0,则不会修改原数组;

4、splice方法会修改原数组,因此需要小心使用。

相关推荐
Mapmost1 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
欢脱的小猴子28 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳30 分钟前
CSS 基础概念
前端·css·css3
前端小巷子31 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar38 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫21 小时前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun1 小时前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙1 小时前
React Hooks 详解
前端·javascript
南囝coding1 小时前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩1 小时前
useCallback useMemo memo 三个区别和作用
前端·react native