JavaScript中数组的splice方法和slice方法详解

简介: 最近在做一些算法题,不能说不知道splice方法和slice方法怎么用,但是总是写出来有点点小问题,干脆就整理一下,再试两个小例子写一篇文章,彻底弄明白。

JavaScript中数组的splice方法和slice方法详解

最近在做一些算法题,不能说不知道splice方法和slice方法怎么用,但是总是写出来有点点小问题,干脆就整理一下,再试两个小例子写一篇文章,彻底弄明白。

splice方法

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

一般使用的格式是这样的

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

其中start是修改开始的位置,deleteCount是从start开始删除多少内容,其余的参数如果有的话就表示在start这个位置插入对应的元素。

下面针对边界条件举几个例子

let arr = [1,2,3,4,5]

arr.splice()
// []
arr
//  [1, 2, 3, 4, 5]
arr.splice(-1)
// [5]
arr
// [1, 2, 3, 4]
arr.splice(-8)
// [1, 2, 3, 4]
arr
// []

可以看到哈:splice方法会直接修改原数组,同时返回截取的数组内容。如果start是负数,就倒着从后往前截取

由于splice方法是对原数组进行修改

我们经常用的就是arr.splice(X,X,XXX)这样的形式,而不会把它专门赋值给另一个变量

slice方法

**slice()** 方法返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

特殊例子

let b = [1,2,3,4]
b.slice(-2,3)
[3]
b.slice(-2,4)
(2) [3, 4]
b.slice(-2,-1)
[3]

可以看出,两个参数都可以为正或者负,主要是看区间里是不是有对应的内容,此外,它的取值是[start,end)

一般情况下我是这么用的

let a = [1,2,3]
let i = 1
let b = a.splice(i,i+1) //表示从i这里取长度为1的数组出来

两者区别还挺大的,小心别每次第二个参数用错了

相关文章
|
前端开发 JavaScript 容器
bootstrap-treeview树
bootstrap-treeview树
265 0
编译原理复习三:Bottom-Up LR(0)自动机构造 SLR(1)分析表与分析器的构造(附题目与答案 超详细)
编译原理复习三:Bottom-Up LR(0)自动机构造 SLR(1)分析表与分析器的构造(附题目与答案 超详细)
413 0
|
机器学习/深度学习 并行计算 PyTorch
PyTorch安装教程
PyTorch是学习深度学习时常用的Python神经网络框架,本文将介绍其部分版本的安装方式。Windows和Linux通用。 作者使用anaconda作为管理虚拟环境的工具。以下工作都在虚拟环境中进行,对Python和Aanaconda的安装及对虚拟环境的管理本文不作赘述,后期可能会撰写相关的博文。
PyTorch安装教程
|
Java Windows
【问题总结】【JAVA开发】(一)Intellj JVM启动报错
一)启动前提,最新社区版intellj 默认支持1.9 以上。将默认jdk20 替换成jdk8 出现以下问题 Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurred. Program will exit. Unrecognized option: --add-opens
1044 0
|
存储 固态存储 关系型数据库
性能优化特性之:16K原子写
本文介绍了在倚天实例上进行内存优化的调优特性:16K原子写 的优化原理、使用方法。
|
存储 Java 调度
Springboot集成Quartz(任务存储在数据库)
集成quartz实现定时调度,quartz是一个功能丰富的开源的任务调用系统,它可以定义很多job并发执行,支持事务和集群
1638 0
|
运维 监控 测试技术
构建高效运维体系:从监控到自动化的实践之路
【10月更文挑战第9天】 在当今信息技术飞速发展的时代,运维作为保障系统稳定性与效率的关键角色,正面临前所未有的挑战。本文将探讨如何通过构建一个高效的运维体系来应对这些挑战,包括监控系统的搭建、自动化工具的应用以及故障应急处理机制的制定。我们将结合具体案例,分析这些措施如何帮助提升系统的可靠性和运维团队的工作效率。
223 1
|
弹性计算 安全 前端开发
阿里云服务器ECS通用型、计算型和内存型详细介绍和性能参数表
阿里云ECS实例有计算型(c)、通用型(g)和内存型(r)三种,主要区别在于CPU和内存比例。计算型CPU内存比1:2,如2核4G;通用型为1:4,如2核8G;内存型为1:8,如2核16G。随着技术迭代,有第五代至第八代产品,如c7、g5、r8a等。每代实例在CPU型号和主频上相同,但性能有所提升。实例性能参数包括网络带宽、收发包能力、连接数等。具体应用场景如计算型适合高网络包收发、通用型适合企业级应用,内存型适合内存数据库等。详细信息可参阅阿里云ECS页面。
1211 0
|
运维 监控 jenkins
运维自动化实战:利用Jenkins构建高效CI/CD流程
【10月更文挑战第18天】运维自动化实战:利用Jenkins构建高效CI/CD流程