当前位置: 首页 > news >正文

如何利用splice()和slice()方法操作数组

如何利用splice()和slice()方法操作数组

  • 前言
  • splice()是什么,有什么用?怎么用?
  • slice()是什么,有什么用?怎么用?
  • splice和slice方法的区别
  • 小结

前言

splice()和slice()都是JavaScript中操作数组的方法,到底怎么用?什么时候用?有什么区别?今天把这个问题搞清楚
在这里插入图片描述


splice()是什么,有什么用?怎么用?

splice()用于在数组中进行添加、删除和替换操作,它可以实现以下功能:

功能1:删除数组中的元素
功能2:向数组中添加新元素
功能3:用新元素替换数组中的元素

splice方法的基本语法如下:

array.splice(start, deleteCount, item1, item2, ...)

参数说明:
start:要删除或插入元素的数组下标。
deleteCount:要删除的元素个数,如果该值为0,则不删除任何元素。
item1, item2, …:要插入到数组中的新元素,可以有多个。

在这里插入图片描述

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];//删除元素,从下标2开始删除2个元素arr.splice(2, 2);console.log(arr); //["孙悟空", "猪八戒"]//添加元素,从下标1开始添加2个元素arr.splice(1, 0, "张麻子", "县长");console.log(arr); //["孙悟空", "张麻子", "县长", "猪八戒"]//替换元素,从下标2开始替换1个元素arr.splice(2, 1, "独孤求败");console.log(arr); //["孙悟空", "张麻子", "独孤求败", "猪八戒"]

★★★关键点:splice方法会直接修改原数组,如果不想修改原数组,可以先将原数组复制一份再进行操作。


slice()是什么,有什么用?怎么用?

slice()用于从数组中获取指定区间的元素,它可以实现以下功能:

功能1:获取指定区间的元素,不会修改原数组
功能2:拷贝数组的一部分,生成一个新的数组

slice方法的基本语法如下:

array.slice(start, end)

参数说明:
start:要拷贝的起始下标,包括该下标的元素。
end:要拷贝的结束下标,不包括该下标的元素。如果省略该参数,则拷贝从start开始到数组末尾的所有元素。

在这里插入图片描述

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];//获取指定区间的元素,不会修改原数组var newArr1 = arr.slice(1, 3);console.log(newArr1); //["猪八戒", "唐僧"]//拷贝数组的一部分,生成一个新的数组var newArr2 = arr.slice();console.log(newArr2); //["孙悟空", "猪八戒", "唐僧", "沙和尚"]

★★★关键点:slice方法不会修改原数组,而是返回一个新的数组,因此可以通过slice方法来复制一个数组。另外,如果拷贝的起始下标或结束下标为负数,则表示从数组末尾开始计算的位置。


splice和slice方法的区别

splice和slice是JavaScript中的两个数组方法,它们的用法有以下区别:

1.splice方法可以修改原数组,而slice方法不会修改原数组,而是返回一个新的数组。
2.splice方法可以用于删除、添加和替换元素,而slice方法仅用于获取指定区间的元素。

在这里插入图片描述

	var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];//使用splice方法删除数组中的元素,修改原数组arr.splice(1, 2);console.log(arr); //["孙悟空", "沙和尚"]//使用slice方法获取指定区间的元素,不修改原数组var newArr = arr.slice(1, 2);console.log(newArr); //["沙和尚"]console.log(arr); //["孙悟空", "沙和尚"]

我们首先使用splice方法删除了数组中的元素,即从下标1开始删除2个元素,这样修改了原数组。然后我们使用slice方法获取了指定区间的元素,即从下标1开始到下标2之前的元素,这样并没有修改原数组,而是返回了一个新的数组。


小结

在了解了splice和slice的用法时,我们知道一般地:
当我们需要修改原数组时,可以使用splice方法;
当我们需要获取指定区间的元素时,可以使用slice方法。
在这里插入图片描述


相关文章:

如何利用splice()和slice()方法操作数组

如何利用splice()和slice()方法操作数组 前言splice()是什么,有什么用?怎么用?slice()是什么,有什么用?怎么用?splice和slice方法的区别小结 前言 splice&am…...

一文读懂ChatGPT(全文由ChatGPT撰写)

最近ChatGPT爆火,相信大家或多或少都听说过ChatGPT。到底ChatGPT是什么?有什么优缺点呢? 今天就由ChatGPT自己来给大家答疑解惑~ 全文文案来自ChatGPT! 01 ChatGPT是什么 ChatGPT是一种基于人工智能技术的自然语言处理系统&…...

如何提升应届生职场竞争力

引言 对于应届毕业生来说,进入职场是既令人兴奋又具有挑战性的。面对竞争激烈的就业市场,提高自身的职场竞争力对于应届生来说尤为重要。本文旨在为应届生提供有价值的见解和实用的策略,帮助他们提升职场竞争力,增加在就业市场中的…...

David Silver Lecture 5: Model-Free Control

1 Introduction 1.1 内容 上一章是对一个unknown MDP进行value function的预测,相当于policy evaluation。这一章是对unknown MDP找到一个最优的policy, optimise value function. 1.2 On and Off-Policy Learning On-policy learning learn on the…...

MySQL-----事务管理

文章目录 前言一、什么是事务二、为什么会出现事务三、事物的版本支持四、事物的提交方式五、事务常见的操作方式六、事务隔离级别如何理解隔离性1隔离级别查看与设置隔离性读未提交【Read Uncommitted】读提交【Read Committed】可重复读【Repeatable Read】串行化【serializa…...

chatGPT润色中英论文软件-文章修改润色器

chatGPT可以润色英文论文吗? ChatGPT可以润色英文论文,它具备自动纠错、自动完善语法和严格全面的语法、句法和内容结构检查等功能,可以对英文论文进行高质量的润色和优化。此外,ChatGPT还支持学术翻译润色、查重及语言改写等服务…...

MacOS下安装和配置Nginx

一、安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"按回车后,根据提示操作:输入镜像序号 --> 输入Y,回车等待brew安装完成即可。 在终端输入brew -v后,会提示…...

采用UWB(超宽频)技术开发的java版智慧工厂定位系统源码

室内定位系统源码,采用UWB定位技术开发的智慧工厂定位系统源码 技术架构:单体服务 硬件(UWB定位基站、卡牌) 开发语言:java 开发工具:idea 、VS Code 前端框架:vue 后端框架:s…...

【2023华为OD笔试必会20题--C语言版】《04 日志采集系统》——数组

本专栏收录了华为OD 2022 Q4和2023Q1笔试题目,100分类别中的出现频率最高(至少出现100次)的20道,每篇文章包括原始题目 和 我亲自编写并在Visual Studio中运行成功的C语言代码。 仅供参考、启发使用,切不可照搬、照抄,查重倒是可以过,但后面的技术面试还是会暴露的。✨✨…...

MySQL数据库——MySQL修改存储过程(ALTER PROCEDURE)

在实际开发过程中,业务需求修改的情况时有发生,所以修改 MySQL 中的存储过程是不可避免的。 MySQL 中通过 ALTER PROCEDURE 语句来修改存储过程。下面将详细讲解修改存储过程的方法。 MySQL 中修改存储过程的语法格式如下: ALTER PROCEDURE…...

ASEMI代理ADV7125JSTZ330原装ADI车规级ADV7125JSTZ330

编辑:ll ASEMI代理ADV7125JSTZ330原装ADI车规级ADV7125JSTZ330 型号:ADV7125JSTZ330 品牌:ADI/亚德诺 封装:LQFP-48 批号:2023 引脚数量:48 工作温度:-40C~85C 安装类型:表面…...

86盒IP对讲一键报警器

86盒IP对讲一键报警器 86盒IP对讲一键报警器:革命性保障生命安全的利器! 随着科技的飞速发展,我们的生活变得越来越方便和智能化。而86盒IP对讲一键报警器更是在这种背景下应运而生。这款产品不仅无缝对接各种手机APP,也可以在智…...

【高数+复变函数】傅里叶积分

文章目录 【高数复变函数】傅里叶积分2. 傅里叶积分2.1 复数形式积分公式2.2 三角形式 上一节: 【高数复变函数】傅里叶级数 【高数复变函数】傅里叶积分 2. 傅里叶积分 在上一节中,我们知道了傅里叶级数的基本知识,其中,周期为…...

【Leetcode】241. 为运算表达式设计优先级

241. 为运算表达式设计优先级(中等) 解法一:分治法 对于这道题,加括号其实就是决定运算次序,所以我们可以把加括号转化为,「对于每个运算符号,先执行处理两侧的数学表达式,再处理此…...

torch两个向量除法,对于分母向量中的元素为0是设置为1,避免运算错误

在gpu运行时,如果在进行两个向量除法的时候,对于分母向量中的元素为0是设置为1,避免运算错误。 可以使用torch的division函数以及clamp函数来解决这个问题。具体步骤如下: 使用division函数将分子向量除以分母向量。 使用clamp函…...

NodeJs 最近各版本特性汇总

(预测未来最好的方法就是把它创造出来——尼葛洛庞帝) NodeJs 官方链接 github链接 V8链接 Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模…...

python数据分析案例——天猫订单综合分析

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 什么是数据分析 明确目的–获得数据(爬虫,现有,公开的数据)–数据预处理——数据可视化——结论 准备 环境使用: 在开始写我们的代码之前,我们要准备好运行代码的程序 Anacon…...

05- redis集群模式搭建(上) (包含云服务器[填坑])

目录 1. 准备环境: 2. 简介: -> 2.1 前言: -> 2.2 Redis集群架构实现了对redis的水平扩容 -> 2.3 redis cluster集群原理 3. 搭建后特别需要注意的问题 ->3.1 [重点]: 如果一个服务出现故障: 是否可以继续提供服务??? ---> 3.1.1 如果集群中故障re…...

【AI】YOLOV1原理详解

AI学习目录汇总 0、前言 YOLOv1~3作者是约瑟夫雷德蒙(Joseph Chet Redmon),他的网站:https://pjreddie.com/ YOLOv1网站:https://pjreddie.com/darknet/yolov1/ YOLOv2网站:https://pjreddie.com/darknet…...

提高APP安全性的必备加固手段——深度解析代码混淆技术

APP 加固方式 Android APP 加固是优化 APK 安全性的一种方法,常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下 Android APP 加固的具体实现方式。 混淆代码: 使用 ProGuard 工具可以对代码进行混淆,使得反编译出来的代…...

centos 7 部署awstats 网站访问检测

一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

HTML 列表、表格、表单

1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...