JS短文,如何正确理解Splice() 函数与Slice() 函数
wptr33 2025-05-05 19:03 54 浏览
转载说明:原创不易,未经授权,谢绝任何形式的转载
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() 函数。在使用这两个函数时,请根据你的需求和预期的结果进行选择。
希望今天的分享对你有所帮助,感谢你的阅读,文章创作不易,如果你喜欢我的分享,别忘了点赞转发,让更多有需要的人看到,最后别忘记关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。
相关推荐
- MySql系列-常用命令
-
本篇是对...
- Record.ToTable 格式转换
-
本期案例对表格格式进行转换,前后转换效果如下:解题套路1.Record.ToTable解题思路:思路就是构造可以透视的样式。使用Record.ToTable对行记录进行转换,获得包含两列的表,首行可以...
- Table.Group 按时期累计计算唯一值
-
本期案例是根据不同id进行汇总统计:组内,相同日期的为一组,统计“from”、“to”中的非重复个数;连续日期的,统计累计数。前后转换效果如下:解题套路1.Table.Group...
- MySQL 9.1正式发布,有哪些值得关注的新特性?
-
MySQL创新版9.1.0于2024年10月15日正式发布。此外,MySQL8.0.40及8.4.3补丁版本也同时发布。8.4.3是目前MySQL的LTS长期支持版本,该版本中将不会增加新的功能与特性...
- SQL基本语句练习(基础版)
-
最近在学习SQL基本语句的练习,在此分享一下笔者做过的练习以及个人的解决教程:首先是基本练习表格的搭建,具体内容如下表所示:...
- SQL 从入门到精通:全面掌握数据库操作
-
学习SQL(StructuredQueryLanguage)是掌握数据库操作的关键步骤。SQL是一种用于管理和处理关系型数据库的标准语言,广泛应用于数据检索、插入、更新和删除等操作。以下是一些...
- ClickHouse学习笔记四ClickHouse基础语法
-
前言这里我们介绍ClickHouse的基本语法,使用环境是腾讯云的ClickHouse。默认情况下,ClickHouse在进行集群纬度执行建表等DDL操作时需要手动添加ONCLUSTERX...
- 程序员总结的常用sql语句大全
-
多年经验程序员总结的我们一般需要使用的sql语句,赶快收藏起来,方便以后使用。以下是一些常用的SQL语句及其用法:一、数据定义语言(DDL)创建库CREATEDATABASE:创建一个新数据库。...
- PQ03-分组求和
-
目标已知:销售清单求:每个销售员的销量合计方法数据准备...
- 好荐:一款数据库元数据管理平台工具
-
“元数据”的定义在不同的软件、项目、工程的定义范围都不太一样。本文这里指的是软件项目开发使用的数据库表结构信息。我今天介绍的这个开源项目叫Databasir,它是一个面向团队的关系型数据库模型文档管理...
- MySQL 8.0 SQL优化黑科技,面试官都不一定知道!
-
前言提到SQL优化,大多数人想到的还是那些经典套路:建索引、避免全表扫描、优化JOIN顺序…这些确实是基础,但如果你还停留在MySQL5.7时代的优化思维,那就out了。MySQL8.0已经发布好...
- MySQL数据库深度优化指南:从基础到架构层面的20个关键策略
-
一、核心性能优化原则数据最小化原则...
- 动物源性食品中兽药残留的检测——喹啉类药物残留
-
喹啉类药物(quinoxaline)是具有喹啉-N1,N4-二氧化物基本结构的一类化学合成的动物专用药,具有广谱抗菌、提高饲料转化率和促生长作用。1965年德国拜耳公司以邻硝基苯胺为原料合成喹乙醇(o...
- 适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架
-
简单到傻!Liang_SaaS适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架,利用Php开发AI的SaaS应用框架,是一个强大的内容管理仪表板模板,基于Bootstrap和...
- Power Query 交错合并表格的方法
-
两张表格合并成一张表格,需要交错排列,表1取一行,表2取一行,这样排列在一起:前提是两张表的行数相同,内容排列顺序相同:我们来看两张表:表1:12列10行表2:11列10行行数相同列数不同,我们在数据...
- 一周热门
-
-
因果推断Matching方式实现代码 因果推断模型
-
C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)
-
git pull命令使用实例 git pull--rebase
-
面试官:git pull是哪两个指令的组合?
-
git 执行pull错误如何撤销 git pull fail
-
git pull 和git fetch 命令分别有什么作用?二者有什么区别?
-
git fetch 和git pull 的异同 git中fetch和pull的区别
-
git pull 之后本地代码被覆盖 解决方案
-
还可以这样玩?Git基本原理及各种骚操作,涨知识了
-
git命令之pull git.pull
-
- 最近发表
- 标签列表
-
- 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)