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 删除数组元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现进度条顺滑版详细方案
最近在小程序里，做了一个类似微博刷视频的需求，其中有一部分功能需要实现自定义进度条，在做完第一版之后发现进度条不顺滑，而后想查查网上看有没有什么好的方案，但最终没找到合适的。下面给大家分享JS进度条顺滑版实现代码，需要的朋友参考下吧
2021-08-08
JavaScript实现留言板添加删除留言
这篇文章主要为大家详细介绍了JavaScript实现留言板添加删除留言，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
JavaScript中播放音频文件的几种常用方法
JS可以用来播放多种声音文件,包括常见的mp3、wav等格式,这篇文章主要给大家介绍了关于JavaScript中播放音频文件的几种常用方法,需要的朋友可以参考下
2023-10-10
详谈$.data()的用法和作用
下面小编就为大家带来一篇详谈$.data()的用法和作用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
从柯里化分析JavaScript重要的高阶函数实例
这篇文章主要为大家介绍了从柯里化分析JavaScript重要的高阶函数实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
微信小程序实现留言板（Storage）
这篇文章主要为大家详细介绍了微信小程序实现留言板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
uniapp禁止遮罩层下页面滚动的解决方法
在uniapp的开发中用过弹窗的都知道有个bug就是滑动弹窗的内容底部页面也会跟着滑动,所以这篇文章主要给大家介绍了关于uniapp禁止遮罩层下页面滚动的解决方法,需要的朋友可以参考下
2023-09-09
犀利的js 函数集合
和同事讨论js时，我说较为理想的状态是，把js当一把好用的匕首，随手拿来，捅一刀子就走。话虽如此，但现实生活中大部分时候的情况是不理想的。
2009-06-06
基于javascript实现精确到毫秒的倒计时限时抢购
现如今做电商网站必不可少的一个效果就是限时抢购，这也是各大电商网站的一种促销手段。如何实现倒计时限时抢购，本文为大家分享了javascript实现倒计时限时抢购的的相关代码，感兴趣的小伙伴们可以参考一下
2016-04-04
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
这篇文章主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下
2016-08-08