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实现点击烟花特效
这篇文章主要介绍了js实现点击烟花特效，帮助大家更好的利用js美化网页，感兴趣的朋友可以了解下
2020-10-10
JavaScript实现购物车图片局部放大预览效果
这篇文章主要为大家详细介绍了JavaScript如何通过canvas简单实现购物车图片放大预览效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
JS实现的新浪微博大厅文字内容滚动效果代码
这篇文章主要介绍了JS实现的新浪微博大厅文字内容滚动效果代码,可实现页面图文元素定时滚动的效果,涉及JavaScript时间函数定时改变页面元素的相关技巧,需要的朋友可以参考下
2015-11-11
layui 实现表单和文件上传一起传到后台的例子
今天小编就为大家分享一篇layui 实现表单和文件上传一起传到后台的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScrip常见的一些算法总结
这篇文章主要介绍了JavaScrip常见的一些算法总结的相关资料,需要的朋友可以参考下
2015-12-12
uniapp使用高德地图的超详细步骤
使用uni-app框架开发微信小程序,可以使用高德地图开发地图选点、搜索位置、定位、获取详细的地址信息、码值等信息,下面这篇文章主要给大家介绍了关于uniapp使用高德地图的超详细步骤,需要的朋友可以参考下
2022-12-12
用box固定长宽实现图片自动轮播js代码
这篇文章主要介绍了用box固定长宽实现图片自动轮播效果,需要的朋友可以参考下
2014-06-06
详解javascript replace高级用法
这篇文章主要介绍了详解javascript replace高级用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
用js获取点击图片的值!
用js获取点击图片的值!...
2007-07-07
学习JavaScript设计模式(代理模式)
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍代理模式，对代理模式进行详细剖析，感兴趣的小伙伴们可以参考一下
2015-12-12