百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

JS短文,如何正确理解Splice() 函数与Slice() 函数

wptr33 2025-05-05 19:03 31 浏览

转载说明:原创不易,未经授权,谢绝任何形式的转载

Splice() 函数与 Slice() 函数都是 JavaScript 数组中常用的方法之一。虽然它们的名称很相似,但它们的作用却截然不同。在这篇文章中,我们将深入了解这两个函数的不同之处以及如何使用它们。

SPLICE() 函数介绍

splice() 是 JavaScript 数组对象的方法之一,可以用于修改数组的内容。具体来说,它可以用于删除或插入元素,并可以返回已删除的元素。

splice() 方法有三个参数,分别为:

  1. 起始索引(必须):指定要修改的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。
  2. 要删除的元素个数(可选):指定要删除的元素的数量。如果该值为 0,则不删除任何元素。
  3. 要插入的元素(可选):指定要插入到数组中的元素。

下面是 splice() 方法的一些常见用法:

1、删除元素:要删除一个元素,可以使用 splice() 方法并将第二个参数设置为 1。

Bash
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(arr); // [1, 2, 4, 5]

2、插入元素:要在数组中插入一个元素,可以使用 splice() 方法并将第二个参数设置为 0,然后在第三个参数中指定要插入的元素。

Bash
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() 方法有两个参数,分别为:

  1. 起始索引(可选):指定要获取的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则从数组的开头开始选取元素。
  2. 结束索引(可选):指定要获取的数组的结束位置的索引(不包括该位置上的元素)。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则选取到数组的最后一个元素。

下面是 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主从集群搭建

文章首发于微信公众号:java架构师进阶之路前言:Mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数据库的所有的...

Mysql-cluster搭建

前期准备准备五台虚拟机:ip地址分别为:192.168.1.211管理节点192.168.1.64SQL节点192.168.1.65SQL节点192.168.1.70数据节点192.168.1...

mysql 主从数据库搭建

一、创建目录在dev/htb下面创建文件夹master01htb]#mkdirmysql/master01-p2)进入master01...

从零搭建高可用的 MySQL 主从复制架构(基于 Linux 实战指南)

背景在生产环境中,单点MySQL数据库容易成为性能瓶颈或单点故障源。搭建MySQL主从复制架构,可以实现读写分离、高可用,提升系统的整体稳定性与扩展性。...

「MySQL 8」MySQL 5.7都即将停只维护了,是时候学习一波MySQL 8了

MySQL8新特性选择MySQL8的背景:MySQL5.6已经停止版本更新了,对于MySQL5.7版本,其将于2023年10月31日停止支持。后续官方将不再进行后续的代码维护。另外,...

Mysql启动选项和配置文件

Mysql启动选项和配置文件Mysql启动方式下面的启动命令都需要依赖在Linux环境下配置的Mysql环境变量...

centos安装mysql操作手册

1.下载Mysql首先去Mysql官网下载安装包,网址https://dev.mysql.com/downloads/mysql/推荐大家下载Linux通用版本的,便于管理安装位置,也方便一台服务器...

MySQL安装

MySQL的安装过程因操作系统的不同而有所差异。以下是在几种常见操作系统上安装MySQL的基本步骤:Windows下载MySQL:访问MySQL官方网站下载页面:MySQLDownloads...

MySQL数据库安装教程

前言今天就带各位小伙伴学习数据库技术。数据库技术是Java开发中必不可少的一部分知识内容。也是非常重要的技术。...

MySQL学到什么程度?才有可以在简历上写精通

前言如今互联网行业用的最多就是MySQL,然而对于高级Web面试者,尤其对于寻找30k下工作的求职者,很多MySQL相关知识点基本都会涉及,如果面试中,你的相关知识答的模糊和不切要点,基...

一起免费考 MySQL OCP 认证啦

前言:在1995年,首个MySQL版本发布,为庆祝MySQL诞辰30周年,OracleUniversity在限定期间内推出了多个MySQL的免费培训课程与认证,其中也包括My...

教程2 | 制作用户管理系统

一、项目简介用户管理系统是一个基于C/S模式的小型管理系统,使用了GUI技术来实现管理系统的页面效果,该管理系统可以对用户的信息,比如姓名、年龄、密码和地址等进行增删改查操作。用户管理系统通过JDBC...

红帽Linux中安装mysql8详细步骤

注意:我写的解压路径和截图路径不一致,仅供参考先前往官网下载mysql8下载地址:https://dev.mysql.com/downloads/选择指定版本和系统下载命令...

MySQL主从配置

主从原理MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的。...

mysql的主从搭建以及实现主从切换方法

主从搭建的方法:a.准备两台服务器...