JavaScript 删除数组元素的方法

更新时间：2024年02月22日 08:26:58 作者：爱问的艾文

本文主要介绍了JavaScript 删除数组元素的方法，包括操作方法改变了原数组和操作方法不改变原数组，具有一定的参考价值，感兴趣的可以了解一下

一、4 种改变原数组的操作方法

1.shift()- 队列方法

用于删除数组中第一个元素，即从左边开始的第一个元素，该操作会影响到数组本身，改变数组原来的长度

let arr = [1,2,3,4];
arr.shift();//删除第一个元素 arr => [2,3,4]

2. pop() - 栈方法

用于删除数组中最后一个元素，即从右边开始的第一个元素，该操作会影响到数组本身，改变数组原来的长度。

let arr = [1,2,3,4];
arr.pop();//删除最后一个元素 arr => [1,2,3]

3. splice() 可以删除多个连续的元素

该方法接收两个参数，第一个参数是要删除的元素下标，第二个参数是从要删除的下标开始删除几个元素；

let arr = [1,2,3,4];
arr.splice(arr.indexOf(1),2);//删除元素值是 1的下标开始的2个元素 arr => [3,4]

4. delete() 可以删除指定元素-特殊的删除操作

delete(arr[0]) 该方法可以删除 arr[0] 的值，但是arr 的长度依旧是原来的长度，只是 arr[0] 被设置为了 ‘empty’ ，它的值变为了undefined。相当于把指定元素的值设置为了undefined。

let arr = [1,2,3,4];
delete(arr[0]);// arr => [empty,2,3,4]
arr[0] //=> undefined

二、2 种不改变原数组，而是返回新对象的操作

1. slice() 方法 - 切片

slice() 方法返回一个新的对象，不影响原数组，该方法有两个入参，第一个参数是起始下标，第二个参数是结束下标的位置。截取的片段不包含第二个参数代表的下标，如果参数为负值说明是从后面数倒数第几个的位置。

let arr = [1,2,3,4];
console.log(arr.slice(1,2));//从下标 1 开始截取到下标 2 前面的片段，即 返回的是[2]
console.log(arr.slice(-3,-1));//从倒数第三个开始截取到倒数第一个之前，即返回 [2,3]
console.log(arr);//=>[1,2,3,4] 依旧不变
l

2. filter() 方法 - 数组的遍历方法

可以通过 ES6 提供的 filter() 方法过滤掉指定值，返回一个新数组

let arr = [1,2,3,4];
let new_arr = arr.filter(item=>item != 2);// new_arr => [1,3,4]
console.log(arr);// arr => [1,2,3,4]

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

您可能感兴趣的文章:

在localStorage中存储对象数组并读取的方法
频繁ajax请求导致页面响应变慢，所以考虑将数据存储在window.storage中，这样只需请求一次ajax，接下来通过本文给大家介绍了在localStorage中存储对象数组并读取的方法,需要的朋友可以参考下
2016-09-09
js图片跟随鼠标移动代码
大家浏览网页的时候，见到过图片跟随鼠标移动的js特效，效果非常好，是怎么实现的呢，实现这个功能很简单，感兴趣的朋友一起看看吧
2015-11-11
jsPDF导出PDF宽大于高异常处理
这篇文章主要为大家介绍了jsPDF导出PDF宽大于高异常处理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
js 实现无干扰阴影效果简单好用（附文件下载）
js实现无干扰阴影效果,简单好用，需要的朋友可以参考下。
2009-12-12
window.print()局部打印三种方式(小结)
本文主要介绍了window.print()局部打印三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
微信小程序实现的动态设置导航栏标题功能示例
这篇文章主要介绍了微信小程序实现的动态设置导航栏标题功能,结合实例形式分析了微信小程序使用wx.setNavigationBarTitle接口动态设置导航栏标题的相关操作技巧,需要的朋友可以参考下
2019-01-01
原生js实现自定义滚动条
这篇文章主要为大家详细介绍了原生js实现自定义滚动条，可点击、拖动到达，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
three.js利用卷积法如何实现物体描边效果
这篇文章主要给大家介绍了关于three.js利用卷积法如何实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-11-11
JavaScript访问样式表代码
在web页面中，我们经常需要通过修改样式（style）来达到更好的用户体验，需要的朋友可以参考下。
2010-10-10
JavaScript实现消消乐的源代码
这篇文章主要介绍了JavaScript实现消消乐-源代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01