当前位置: 首页 > 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方法。
在这里插入图片描述


http://www.lryc.cn/news/67003.html

相关文章:

  • 一文读懂ChatGPT(全文由ChatGPT撰写)
  • 如何提升应届生职场竞争力
  • David Silver Lecture 5: Model-Free Control
  • MySQL-----事务管理
  • chatGPT润色中英论文软件-文章修改润色器
  • MacOS下安装和配置Nginx
  • 采用UWB(超宽频)技术开发的java版智慧工厂定位系统源码
  • 【2023华为OD笔试必会20题--C语言版】《04 日志采集系统》——数组
  • MySQL数据库——MySQL修改存储过程(ALTER PROCEDURE)
  • ASEMI代理ADV7125JSTZ330原装ADI车规级ADV7125JSTZ330
  • 86盒IP对讲一键报警器
  • 【高数+复变函数】傅里叶积分
  • 【Leetcode】241. 为运算表达式设计优先级
  • torch两个向量除法,对于分母向量中的元素为0是设置为1,避免运算错误
  • NodeJs 最近各版本特性汇总
  • python数据分析案例——天猫订单综合分析
  • 05- redis集群模式搭建(上) (包含云服务器[填坑])
  • 【AI】YOLOV1原理详解
  • 提高APP安全性的必备加固手段——深度解析代码混淆技术
  • 想让行车记录仪协助道路病害自动化检测?可以!
  • git上传大大大文件项目好折磨人
  • java常见异常的处理方法
  • 上传图片到阿里云服务器base64 上传
  • 【致敬未来的攻城狮计划】— 连续打卡第二十六天:瑞萨RA Cortex-M 内核RA2E1 RT-Thread BSP 启蒙知识
  • 2023年5月8日-5月14日(方案C,下班UE视频教程为主)
  • 「MIAOYUN」:降本增效,赋能传统企业数字化云原生转型 | 36kr 项目精选
  • Python突破JS加密限制,进行逆向解密
  • 【Linux】exec函数族
  • OSQP二次规划求解库使用说明
  • Elasticsearch(一)