JS短文,如何正确理解Splice() 函数与Slice() 函数
wptr33 2025-05-05 19:03 73 浏览
转载说明:原创不易,未经授权,谢绝任何形式的转载
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() 函数。在使用这两个函数时,请根据你的需求和预期的结果进行选择。
希望今天的分享对你有所帮助,感谢你的阅读,文章创作不易,如果你喜欢我的分享,别忘了点赞转发,让更多有需要的人看到,最后别忘记关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。
相关推荐
- oracle数据导入导出_oracle数据导入导出工具
-
关于oracle的数据导入导出,这个功能的使用场景,一般是换服务环境,把原先的oracle数据导入到另外一台oracle数据库,或者导出备份使用。只不过oracle的导入导出命令不好记忆,稍稍有点复杂...
- 继续学习Python中的while true/break语句
-
上次讲到if语句的用法,大家在微信公众号问了小编很多问题,那么小编在这几种解决一下,1.else和elif是子模块,不能单独使用2.一个if语句中可以包括很多个elif语句,但结尾只能有一个else解...
- python continue和break的区别_python中break语句和continue语句的区别
-
python中循环语句经常会使用continue和break,那么这2者的区别是?continue是跳出本次循环,进行下一次循环;break是跳出整个循环;例如:...
- 简单学Python——关键字6——break和continue
-
Python退出循环,有break语句和continue语句两种实现方式。break语句和continue语句的区别:break语句作用是终止循环。continue语句作用是跳出本轮循环,继续下一次循...
- 2-1,0基础学Python之 break退出循环、 continue继续循环 多重循
-
用for循环或者while循环时,如果要在循环体内直接退出循环,可以使用break语句。比如计算1至100的整数和,我们用while来实现:sum=0x=1whileTrue...
- Python 中 break 和 continue 傻傻分不清
-
大家好啊,我是大田。今天分享一下break和continue在代码中的执行效果是什么,进一步区分出二者的区别。一、continue例1:当小明3岁时不打印年龄,其余年龄正常循环打印。可以看...
- python中的流程控制语句:continue、break 和 return使用方法
-
Python中,continue、break和return是控制流程的关键语句,用于在循环或函数中提前退出或跳过某些操作。它们的用途和区别如下:1.continue(跳过当前循环的剩余部分,进...
- L017:continue和break - 教程文案
-
continue和break在Python中,continue和break是用于控制循环(如for和while)执行流程的关键字,它们的作用如下:1.continue:跳过当前迭代,...
- 作为前端开发者,你都经历过怎样的面试?
-
已经裸辞1个月了,最近开始投简历找工作,遇到各种各样的面试,今天分享一下。其实在职的时候也做过面试官,面试官时,感觉自己问的问题很难区分候选人的能力,最好的办法就是看看候选人的github上的代码仓库...
- 面试被问 const 是否不可变?这样回答才显功底
-
作为前端开发者,我在学习ES6特性时,总被const的"善变"搞得一头雾水——为什么用const声明的数组还能push元素?为什么基本类型赋值就会报错?直到翻遍MDN文档、对着内存图反...
- 2023金九银十必看前端面试题!2w字精品!
-
导文2023金九银十必看前端面试题!金九银十黄金期来了想要跳槽的小伙伴快来看啊CSS1.请解释CSS的盒模型是什么,并描述其组成部分。答案:CSS的盒模型是用于布局和定位元素的概念。它由内容区域...
- 前端面试总结_前端面试题整理
-
记得当时大二的时候,看到实验室的学长学姐忙于各种春招,有些收获了大厂offer,有些还在苦苦面试,其实那时候的心里还蛮忐忑的,不知道自己大三的时候会是什么样的一个水平,所以从19年的寒假放完,大二下学...
- 由浅入深,66条JavaScript面试知识点(七)
-
作者:JakeZhang转发链接:https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深,66条JavaScript面试知识点(一)由浅入深,66...
- 2024前端面试真题之—VUE篇_前端面试题vue2020及答案
-
添加图片注释,不超过140字(可选)1.vue的生命周期有哪些及每个生命周期做了什么?beforeCreate是newVue()之后触发的第一个钩子,在当前阶段data、methods、com...
- 今年最常见的前端面试题,你会做几道?
-
在面试或招聘前端开发人员时,期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方,挑战人们的思考方式,并客观地分析给定的问题。可以通过面试了解人们如何做出决策,了解一个人对技术和解决问...
- 一周热门
- 最近发表
- 标签列表
-
- git pull (33)
- git fetch (35)
- mysql insert (35)
- mysql distinct (37)
- concat_ws (36)
- java continue (36)
- jenkins官网 (37)
- mysql 子查询 (37)
- python元组 (33)
- mybatis 分页 (35)
- vba split (37)
- redis watch (34)
- python list sort (37)
- nvarchar2 (34)
- mysql not null (36)
- hmset (35)
- python telnet (35)
- python readlines() 方法 (36)
- munmap (35)
- docker network create (35)
- redis 集合 (37)
- python sftp (37)
- setpriority (34)
- c语言 switch (34)
- git commit (34)
