javaScript中slice()和splice()的用法与区别

  1. 定义和功能

    • slice()方法
      • slice()方法用于从一个数组(或字符串)中提取指定范围的元素(或字符),它不会改变原始数组(或字符串),而是返回一个新的数组(或字符串)。
      • 语法为array.slice(start, end)(对于数组)或string.slice(start, end)(对于字符串)。其中start是开始提取的索引(包含),end是结束提取的索引(不包含)。如果省略end参数,则提取从start到数组(或字符串)末尾的所有元素(或字符)。
    • splice()方法
      • splice()方法主要用于修改数组。它可以删除数组中的元素、插入新元素或者同时进行删除和插入操作。这个方法会直接改变原始数组。
      • 语法为array.splice(start, deleteCount, item1, item2,...)。其中start是开始修改的索引,deleteCount是要删除的元素个数,item1, item2,...是要插入的新元素。
  2. 返回值

    • slice()方法

      • 返回一个包含提取元素(或字符)的新数组(或新字符串)。例如: 收起

        javascript

        复制代码
        let arr = [1, 2, 3, 4, 5];
        let newArr = arr.slice(1, 3);
        console.log(newArr); // [2, 3]
        console.log(arr);   // [1, 2, 3, 4, 5](原始数组不变)

        对于字符串也类似:

        收起

        javascript

        复制代码
        let str = "Hello World";
        let newStr = str.slice(0, 5);
        console.log(newStr); // "Hello"
        console.log(str);    // "Hello World"(原始字符串不变)
    • splice()方法

      • 返回一个包含被删除元素的数组。如果没有删除元素,则返回一个空数组。例如: 收起

        javascript

        复制代码
        let arr = [1, 2, 3, 4, 5];
        let removedItems = arr.splice(1, 2);
        console.log(removedItems); // [2, 3]
        console.log(arr);           // [1, 4, 5](原始数组已改变)
  3. 参数使用的区别

    • slice()方法

      • 它的参数主要是用于指定提取的范围。参数可以是正数、负数。正数表示从前往后的索引,负数表示从后往前的索引。例如: 收起

        javascript

        复制代码
        let arr = [1, 2, 3, 4, 5];
        // 从倒数第二个元素开始提取到末尾
        let newArr = arr.slice(-2);
        console.log(newArr); // [4, 5]
    • splice()方法

      • 参数比较灵活。start参数指定操作的起始位置,deleteCount用于指定要删除的元素个数。如果deleteCount为 0,则表示不删除元素,只插入新元素。例如:

        收起

        javascript

        复制代码
        let arr = [1, 2, 3, 4, 5];
        // 在索引为2的位置插入两个元素
        arr.splice(2, 0, 6, 7);
        console.log(arr); // [1, 2, 6, 7, 3, 4, 5]
  4. 应用场景

    • slice()方法
      • 当需要从一个数组或字符串中获取部分数据,而不改变原始数据时,就可以使用slice()。例如,在处理数据视图或者复制数据子集时很有用。在函数式编程中,也经常用于获取数据副本,以避免副作用。
    • splice()方法
      • 当需要对数组进行实际的修改,如删除元素、插入元素或者重新排列元素顺序时,使用splice()。比如在实现一个数据列表的增删操作时,就可以使用这个方法来更新数组的内容。
相关推荐
拖拉斯旋风2 分钟前
从零开始:使用 Ollama 在本地部署开源大模型并集成到 React 应用
前端·javascript·ollama
superman超哥9 分钟前
双端迭代器(DoubleEndedIterator):Rust双向遍历的优雅实现
开发语言·后端·rust·双端迭代器·rust双向遍历
asing10 分钟前
🤯 为什么我的收银台在鸿蒙系统“第一次返回”死活拦不住?一次差点背锅的排查实录
前端·harmonyos
德育处主任11 分钟前
『NAS』在群晖部署图片压缩工具-Squoosh
前端·javascript·docker
Hao_Harrision13 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| ThreeDBackgroundBoxes(3D背景盒子组件)
前端·3d·typescript·react·tailwindcss·vite7
加个鸡腿儿16 分钟前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
Jayden_Ruan18 分钟前
C++蛇形方阵
开发语言·c++·算法
心.c34 分钟前
如何基于 RAG 技术,搭建一个专属的智能 Agent 平台
开发语言·前端·vue.js
智航GIS1 小时前
10.7 pyspider 库入门
开发语言·前端·python
跟着珅聪学java1 小时前
JavaScript 底层原理
java·开发语言