Javascript数组的 splice 方法详细介绍

更新时间：2022年09月27日 10:21:23 作者：阿常呓

这篇文章主要介绍了Javascript数组的splice方法详细介绍，splice方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

前言

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法格式：

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

参数：

start 必选

指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount 可选

整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, *...* 可选

要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

描述：如果添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。

牛刀小试

现在有一个场景，我和我的室友们，现在在一个数组里面。按照排行分别为: 老大，老二，老三, … ,老六, 小七.

这里我用下面的数组进行举例

var arr = ['Liu laoda','Li laoer','Wei laosan','Frank','Guan laowu','Yang laoliu','Li xiaoqi'];

删除元素

删除一个元素,删除某个位置的元素

var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];

// start 开始位置，从零开始 ， deleteCount 删除个数,从1 开始
// arr.splice(start,count)
// 删除第0位置的一个元素
arr.splice(0,1);
console.log('arr=',arr);

可以看到第0号位置 'Liu laoda' 被删除了。

删除前面两个元素

var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 删除 前两个元素
arr.splice(0,2);
console.log('arr=',arr);  // ['Wei laosan', 'Frank']

添加元素并且替换元素

splice 删除元素后会返回被删除的元素，返回类型是一个 Array 类型.

example1

这里可以进行元素替换，替换之后直接会影响原来的数组的。返回的是删除的数组元素

var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];

// 添加元素,删除元素 用 Guan laowu 替换掉
// 从1号位置删除一个元素，插入 元素 'Guan laowu'
// 返回被删除的元素
console.log('before arr=',arr);
var removed = arr.splice(1, 1, 'Guan laowu');
console.log('arr=',arr);
console.log('removed=',removed);   // removed.constructor.name  == Array

example2

删除的个数和添加的元素的个数可以是不一样的。

var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
console.log('before arr=',arr);
// 删除 idx=1的元素,并且 添加 在此位置 依次添加4个元素。
var removed = arr.splice(1, 1, 'Guan laowu','A','B','C');
console.log('arr=',arr);
console.log('removed=',removed);   // removed.constructor.name  == Array

example3

删除元素的例子，如果没有在第三个参数上有任何元素，则表示删除元素了。

start 开始位置，deleteCount 删除个数，如果删除的个数大于数组本身长度，则全部删除了。

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 从数组 下标为2的位置, 删除3个元素
var removed = arr.splice(2, 3);  // ['Wei laosan', 'Frank', 'Guan Laowu']
console.log('arr=', arr); //['Liu laoda', 'Li laoer', 'Yang Laoliu', 'Li xiaoqi']
console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu']

注意这里删除元素直接对原来的数组修改，返回值就是删除的元素的数组。

同时数组的length 属性，维护成正确的值。

example4

如果删除的元素个数，超过了后面到数组的最大长度，则后面的元素全部被删除了。

比如从下标2 后面有 5个元素，此时 deleteCount = 10 ,那么后面的元素下标>=2 ，全部删除掉

			var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
			console.log('before arr=', arr);
			// 从数组 下标为2的位置, 删除10个元素
			var removed = arr.splice(2, 10);  // ['Wei laosan', 'Frank', 'Guan Laowu']
			console.log('arr=', arr); // ['Liu laoda', 'Li laoer']
			console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu', 'Yang Laoliu', 'Li xiaoqi']

添加元素

example1

在idx=2 的位置添加 ‘Frank’ 元素，

此时只要把 deleteCount = 0,表示删除0个元素 ,表示在此位置上添加元素。

var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=2 的位置 添加 'Frank' 元素
var removed = arr.splice(2, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed);

example2

在数组的头部添加元素, Frank

var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=0 的位置 添加 'Frank' 元素
var removed = arr.splice(0, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed);  // []

在数组尾部添加元素, Frank

var arr = ['Liu laoda','Li laoer','Wei laosan'];
console.log('before arr=',arr);
// 在数组 尾部 添加 Frank
var removed = arr.splice(arr.length, 0,'Frank');
console.log('arr=',arr);  
console.log('removed=',removed);  // []

负数索引支持

删除后面两个元素

// 负数索引
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 删除后两个元素
var removed = arr.splice(-2);  
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan']
console.log('removed=', removed); // ['Frank', 'Guan Laowu']

删除数组最后一个元素

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 删除后1个元素
var removed = arr.splice(-1);  
console.log('arr=', arr);  // ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank']
console.log('removed=', removed);  // ['Guan Laowu']

总结

array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 这个函数可以实现对数组的增加，删除，替换。

start 就是开始的下标位置，必选参数.

deleteCount 删除多少个元素，如果没有指定那么一直会删除到数组的最后位置。

最后一个参数，表示删除后要填充其他的元素，如果要就写入填入的元素即可。如果不需要，就是单纯的删除元素。

到此这篇关于Javascript数组的 splice 方法详细介绍的文章就介绍到这了,更多相关Javascrip splice 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

WEB高性能开发之疯狂的HTML压缩
一篇随笔中网友 skyaspnet 问我如何压缩HTML，当时回答是推荐他使用gzip，后来想想，要是能把所有的html，jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。
2010-06-06
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
在WEB页面中，我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用户点击某处，然后直接由浏览器帮我们跳转。
2010-05-05
uniapp中使用vuex并持久化的方法示例
vuex是基于vuex.js的状态管理工具,可以把它理解为一个仓库,下面这篇文章主要给大家介绍了关于uniapp中如何使用vuex并持久化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
网络图片延迟加载实现代码超越jquery控件
原理是分段加载图片，主要用于大型网站节省带宽，可是他们提供的东西压缩混淆看不清，还有的要基于什么雅虎的什么库，总之是很麻烦的，JQ的控件倒是够清晰了，只是还是没有达到节省网络带宽的效果
2010-03-03
js复制网页内容并兼容各主流浏览器的代码
js 复制网页内容的方法代码有很多不过要兼容各浏览器就不多了，下面有个不错的方法，大家可以尝试操作下
2013-12-12
javascript实现的时间格式加8小时功能示例
这篇文章主要介绍了javascript实现的时间格式加8小时功能,涉及javascript日期时间转换与运算相关操作技巧,需要的朋友可以参考下
2019-06-06
手把手15分钟搭一个企业级脚手架
这篇文章主要介绍了手把手15分钟搭一个企业级脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
JavaScript中setTimeout()的具体用法
本文主要介绍了JavaScript中setTimeout()的具体用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
JavaScript实现带有子菜单和控件的slider轮播图效果
本文通过实例代码给大家介绍了基于js实现带有子菜单和控件的slider轮播图效果，本文附有图片和示例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-11-11
通过javascript进行UTF-8编码的实现方法
下面小编就为大家带来一篇通过javascript进行UTF-8编码的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06