JS中splice添加或删除数组元素

更新时间：2023年12月28日 15:30:57 作者：布丁吖

本文主要介绍了JS中splice添加或删除数组元素,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

语法

array.splice(index,howmany,item1,…,itemX)

参数说明

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1,…,itemX	可选。要添加到数组的新元素

返回值说明

Type	描述
Array	如果从arrayObject中删除了元素，则返回的是含有被删除的元素的数组。

下标问题

第一个参数index是数组的下标，因为index是整数，整数包括正数、负数和0，所以就需要理解清楚正数的时候下标是怎么排的，负数的时候下标是怎么排的，这样写代码的时候就不会迷糊了(不要问我为什么这么说😅)。

在网上没有找到相关资料说明splice的下标是怎么搞得，没办法那就只能自己研究了，功夫不负有心人，经过一番努力终于搞明白了😃。

下标排序方式如下：

在这里插入图片描述

实战

splice(index)

从index的位置开始，删除之后的所有元素(包括第index个)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(1);
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相

在这里插入图片描述

splice(index,howmany)

删除从index位置开始的数，howmany为删除的个数，当howmany≤0时不会删除任何元素。

示例一(howmany＞0)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(1, 2);
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相：

在这里插入图片描述

示例二(howmany ≤ 0)

howmany≤0就是不删除howmany≤0就是不删除howmany≤0就是不删除

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(1, 0);
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

在这里插入图片描述

splice(index,howmany,item1,…,itemX)

howmany ≤ 0

howmany≤0就是不删除howmany≤0就是不删除howmany≤0就是不删除在index位置按顺序依次添加item1,…,itemX

示例一(index ≥ 0)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(1, 0, 'Grape', 'Pear');
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相

在这里插入图片描述

示例二(index＜0)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(-1, 0, 'Grape', 'Pear');
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相

在这里插入图片描述

howmany＞0

先从index位置(包含index)开始删除howmany个元素，然后在index位置按顺序依次添加item1,…,itemX

示例一(index ≥ 0)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(1, 1, 'Grape', 'Pear');
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相(蓝框标出的是添加的元素，橙框标出的是删除的元素)

在这里插入图片描述

示例二(index＜0)

      let array = ['Banana', 'Orange', 'Apple', 'Mango']
      console.log('原数组：', array)
      let splice = array.splice(-2, 2, 'Grape', 'Pear');
      console.log('操作后数组：', array)
      console.log('变动内容', splice)

有图有真相(蓝框标出的是添加的元素，橙框标出的是删除的元素)

在这里插入图片描述

到此这篇关于JS中splice添加或删除数组元素的文章就介绍到这了,更多相关JS splice添加删除数组元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现禁止高频率连续点击的方法【基于ES6语法】
这篇文章主要介绍了JS实现禁止高频率连续点击的方法,通过事件监听结合定时器实现针对高频率点击的限制操作,该功能基于ES6语法实现,需要的朋友可以参考下
2017-04-04
JavaScript实现各种排序的代码详解
这篇文章给大家介绍了js实现各种排序功能，包括冒泡排序，选择排序和插入排序，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-08-08
js之点击超连接,提示一个层.点击空白层消失
最近写一个功能，需要用到点击空白层就让指定的一个层消失，这里简单介绍下实现方法，需要的朋友可以参考下
2007-05-05
基于pako.js实现gzip的压缩和解压功能示例
这篇文章主要介绍了基于pako.js实现gzip的压缩和解压功能,结合具体实例形式分析了pako.js实现字符串压缩与解压缩的相关操作技巧,需要的朋友可以参考下
2017-06-06
js实现拖动缓动效果
这篇文章主要为大家详细介绍了js实现拖动缓动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
前端性能优化及技巧
这篇文章主要介绍了前端性能优化及技巧,需要的朋友可以参考下
2016-05-05
结合 ES6 类编写JavaScript 创建型模式
这篇文章主要介绍了结合ES6类编写JavaScript创建型模式，本文开始系统性的对20多种JavaScript 设计模式进行简单概述，然后结合ES6类的方式来编写实例代码展示其使用方式，需要的朋友可以参考一下
2022-07-07
JavaScript基础之AJAX简单的小demo
这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
基于JS实现快速读取TXT文件
这篇文章主要介绍了基于JS实现快速读取TXT文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
jQuery实现动态生成表格并为行绑定单击变色动作的方法
这篇文章主要介绍了jQuery实现动态生成表格并为行绑定单击变色动作的方法,涉及jQuery页面元素遍历与事件动态响应相关操作技巧,需要的朋友可以参考下
2017-04-04