JS短文,如何正确理解Splice() 函数与Slice() 函数
itomcoil 2025-04-05 19:24 13 浏览
转载说明:原创不易,未经授权,谢绝任何形式的转载
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数据同步ES的4种方法!你能想到几种?
-
如何进行数据同步MySQL是一种流行的关系型数据库,而Elasticsearch是一个强大的搜索引擎和分析平台。将MySQL数据同步到Elasticsearch中可以帮助我们更方便地搜索和分析数据。在...
- Java 连接 MySQL 数据库(java连接mysql课设)
-
一、环境准备1.1依赖管理(Maven)在项目的pom.xml中添加MySQL驱动依赖:<dependency><groupId>mysql</gro...
- Spring Boot 连接 MySQL 数据库(spring boot配置数据库连接)
-
一、环境准备1.1依赖管理(Maven)<!--方案1:JdbcTemplate--><dependency><groupId>org.sprin...
- java连接mysql数据库达成数据查询详细教程
-
前言:本篇文章适用于所有前后端开发者众所周知,只要是编程,那肯定是需要存储数据的,无论是c语言还是java,都离不开数据的读写,数据之间传输不止,这也就形成了现代互联网的一种相互存在关系!而读写存储的...
- 既然有MySQL了,为什么还要有MongoDB?
-
大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,了解一下MongoDB的特点和基本用法,...
- 用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)
-
目录一、写在前面二、效果图三、实现思路四、实现代码1、login总界面2、registercheck总代码3、logoutcheck总代码4、amendcheck总代码相关文章一、写在前面哈喽~大家好...
- MySQL关联查询时,为什么建议小表驱动大表?这样做有什么好处
-
在SQL数据库中,小表驱动大表是一种常见的优化策略。这种策略在涉及多表关联查询的情况下尤其有效。这是因为数据库查询引擎会尽可能少的读取和处理数据,这样能极大地提高查询性能。"小表驱动大表&...
- mysql8驱动兼容规则(mysql8.0驱动)
-
JDBC版本:Connector/J8.0支持JDBC4.2规范.如果Connector/J8.0依赖于更高版本的jdbclib,对于调用只有更高版本特定的方法会抛出SQLFea...
- mysql数据表如何导入MSSQL中(mysql怎样导入数据)
-
本案例演示所用系统是windowsserver2012.其它版本windows操作系统类似。1,首先需要下载mysqlodbc安装包。http://dev.mysql.com/downloa...
- MySQL 驱动中虚引用 GC 耗时优化与源码分析
-
本文要点:一种优雅解决MySQL驱动中虚引用导致GC耗时较长问题的解决方法虚引用的作用与使用场景MySQL驱动源码中的虚引用分析背景在之前文章中写过MySQLJDBC驱动中的虚引用导致...
- ExcelVBA 连接 MySQL 数据库(vba 连接sqlserver)
-
上期分享了ExcelVBA连接sqlite3数据库,今天给大家分享ExcelVBA连接另一个非常流行的MySQL数据库。一、环境win10Microsoftoffice2010(...
- QT 5.12.11 编译MySQL 8 驱动教程- 1.01版
-
安装编译环境:qt5.12.11mysql8.0.28修改mysql.pro工程文件,编译生成动态库mysql.pro文件位置:D:\Alantop_Dir\alantop_sde\Qt\Qt5....
- 「Qt入门第22篇」 数据库(二)编译MySQL数据库驱动
-
导语在上一节的末尾我们已经看到,现在可用的数据库驱动只有两类3种,那么怎样使用其他的数据库呢?在Qt中,我们需要自己编译其他数据库驱动的源码,然后当做插件来使用。下面就以现在比较流行的MySQL数据库...
- (干货)一级注册计量师第五版——第四章第三节(三)
-
计量标准的建立、考核及使用(三)PS:内容都是经过个人学习而做的笔记。如有错误的地方,恳请帮忙指正!计量标准考核中有关技术问题1检定或校准结果的重复性重复性是指在一组重复性测量条件下的测量精密度。检定...
- 声学测量基础知识分享(声学测量pdf)
-
一、声学测量的分类和难点1.声学测量的分类声学测量按目的可分为:声学特性研究(声学特性研究、媒质特性研究、声波发射与接收的研究、测量方法与手段的研究、声学设备的研究),声学性能评价和改善(声学特性评价...
- 一周热门
- 最近发表
-
- 字节三面:MySQL数据同步ES的4种方法!你能想到几种?
- Java 连接 MySQL 数据库(java连接mysql课设)
- Spring Boot 连接 MySQL 数据库(spring boot配置数据库连接)
- java连接mysql数据库达成数据查询详细教程
- 既然有MySQL了,为什么还要有MongoDB?
- 用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)
- MySQL关联查询时,为什么建议小表驱动大表?这样做有什么好处
- mysql8驱动兼容规则(mysql8.0驱动)
- mysql数据表如何导入MSSQL中(mysql怎样导入数据)
- MySQL 驱动中虚引用 GC 耗时优化与源码分析
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)