网站首页 > 教程文章 正文
转载说明:原创不易,未经授权,谢绝任何形式的转载
Splice() 函数与 Slice() 函数都是 JavaScript 数组中常用的方法之一。虽然它们的名称很相似,但它们的作用却截然不同。在这篇文章中,我们将深入了解这两个函数的不同之处以及如何使用它们。
SPLICE() 函数介绍
splice() 是 JavaScript 数组对象的方法之一,可以用于修改数组的内容。具体来说,它可以用于删除或插入元素,并可以返回已删除的元素。
splice() 方法有三个参数,分别为:
- 起始索引(必须):指定要修改的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。
- 要删除的元素个数(可选):指定要删除的元素的数量。如果该值为 0,则不删除任何元素。
- 要插入的元素(可选):指定要插入到数组中的元素。
下面是 splice() 方法的一些常见用法:
1、删除元素:要删除一个元素,可以使用 splice() 方法并将第二个参数设置为 1。
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(arr); // [1, 2, 4, 5]
2、插入元素:要在数组中插入一个元素,可以使用 splice() 方法并将第二个参数设置为 0,然后在第三个参数中指定要插入的元素。
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 6); // 在索引 2 的位置插入 6
console.log(arr); // [1, 2, 6, 3, 4, 5]
let num_arr = [1,2,3,4,5];
num_arr.splice(1,0, …[2,3]) === [1,2,3,4,5]
3、替换元素:要替换一个元素,可以使用 splice() 方法并将第二个参数设置为 1,然后在第三个参数中指定要替换的元素。
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6); // 从索引 2 开始删除 1 个元素,并在该位置插入 6
console.log(arr); // [1, 2, 6, 4, 5]
4、返回已删除的元素:splice() 方法还可以返回已删除的元素。
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 1); // 从索引 2 开始删除 1 个元素,并将其存储在 removed 变量中
console.log(arr); // [1, 2, 4, 5]
console.log(removed); // [3]
注意:使用 splice() 方法会改变原始数组。如果您不希望改变原始数组,可以先创建一个副本并对其进行操作。
SLICE() 函数介绍
slice() 是 JavaScript 数组对象的方法之一,可以用于获取数组的一部分并返回一个新的数组。它不会修改原始数组,而是返回一个包含所选元素的新数组。
slice() 方法有两个参数,分别为:
- 起始索引(可选):指定要获取的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则从数组的开头开始选取元素。
- 结束索引(可选):指定要获取的数组的结束位置的索引(不包括该位置上的元素)。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则选取到数组的最后一个元素。
下面是 slice() 方法的一些常见用法:
1、获取一段连续的元素:要获取数组中的一段连续的元素,可以使用 slice() 方法并指定起始和结束索引。
const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
// 从索引 1 开始选取到索引 4(不包括该位置上的元素),即 [2, 3, 4]
console.log(slicedArr); // [2, 3, 4]
2、复制整个数组:要复制整个数组,可以使用 slice() 方法并省略起始和结束索引。
const arr = [1, 2, 3, 4, 5];
const copiedArr = arr.slice(); // 复制整个数组
console.log(copiedArr); // [1, 2, 3, 4, 5]
3、从数组末尾开始获取元素:要从数组的末尾开始获取元素,可以使用负数索引。
const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(-3);
// 从数组末尾开始选取 3 个元素,即 [3, 4, 5]
console.log(slicedArr); // [3, 4, 5]
SPLICE() 和 slice() 的区别
splice() 方法:
- 用于在数组中添加或删除元素。
- 可以修改原始数组。
- 第一个参数表示要添加或删除元素的起始位置。
- 第二个参数表示要删除的元素数量。
- 可以通过第三个参数及以后的参数来添加元素到指定位置。
- 返回一个包含被删除元素的数组,如果没有删除元素,则返回一个空数组。
slice() 方法:
- 用于获取数组的一部分并返回一个新数组。
- 不会修改原始数组。
- 第一个参数表示要获取的数组的开始位置的索引。
- 第二个参数表示要获取的数组的结束位置的索引(不包括该位置上的元素)。
- 如果省略第二个参数,则选取到数组的最后一个元素。
- 返回一个包含所选元素的新数组。
结束
今天的内容就介绍到这里,虽然 Splice() 函数和 Slice() 函数都可以在 JavaScript 数组中起到重要的作用,但它们的作用和返回值是完全不同的。如果你需要向数组中添加或删除元素并且希望修改原始数组,则可以使用 Splice() 函数;如果你需要创建一个新的数组并选择其中的一部分元素,则可以使用 Slice() 函数。在使用这两个函数时,请根据你的需求和预期的结果进行选择。
希望今天的分享对你有所帮助,感谢你的阅读,文章创作不易,如果你喜欢我的分享,别忘了点赞转发,让更多有需要的人看到,最后别忘记关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。
猜你喜欢
- 2025-05-23 JavaScript巩固基础每日随记之[数组]
- 2025-05-23 你应该掌握的 10 种 JavaScript 对象处理技巧
- 2025-05-23 更简单的Vue3中后台动态路由 + 侧边栏渲染方案
- 2025-05-23 2023:Js中新增四个不修改原数组的方法
- 2025-05-23 常见vue面试题,大厂小厂都一样
- 2025-05-23 在vue实现element ui中的card(卡片中)使用多选和分页
- 2025-05-23 js数组常用方法总结
- 2025-05-23 php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒
- 2025-05-23 关于数组的操作方法
- 2025-05-23 javascript基础入门
- 05-25干货 | 一步步部署 Flask 应用
- 05-25别再去找Docker命令了,你要的常用的全都在这
- 05-25如果您删除Windows11上的“Program Files”文件夹会发生什么?
- 05-25家用nas最常用的docker容器及部署方法
- 05-25你好 dotnet run file, 再见 csproj
- 05-25China committed to continuing contributions to global health: delegation
- 05-25Chinese, German experts urge cooperation during Eurasia relations seminar
- 05-25Peace of paramount importance for region
- 最近发表
-
- 干货 | 一步步部署 Flask 应用
- 别再去找Docker命令了,你要的常用的全都在这
- 如果您删除Windows11上的“Program Files”文件夹会发生什么?
- 家用nas最常用的docker容器及部署方法
- 你好 dotnet run file, 再见 csproj
- China committed to continuing contributions to global health: delegation
- Chinese, German experts urge cooperation during Eurasia relations seminar
- Peace of paramount importance for region
- after和in用法解析
- China's top diplomat to chair third China-Pacific Island countries foreign ministers' meeting
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)