JavaScript 删除数组元素的方法

 更新时间:2024年02月22日 08:26:58   作者:爱问的艾文  
本文主要介绍了JavaScript 删除数组元素的方法,包括操作方法改变了原数组和操作方法不改变原数组,具有一定的参考价值,感兴趣的可以了解一下

本文介绍JavaScript 删除数组中的元素的六大方法,分为如下两大类

  • 操作方法改变了原数组 - 4 种
  • 操作方法不改变原数组 - 2 种

一、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显示日历和天气的方法

    这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
    2016-03-03
  • 基于JavaScript FileReader上传图片显示本地链接

    基于JavaScript FileReader上传图片显示本地链接

    这篇文章主要为大家详细介绍了基于JavaScript FileReader上传图片显示本地链接的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • hash特点、hashchange事件介绍及其常见应用场景

    hash特点、hashchange事件介绍及其常见应用场景

    浅析hash特点、hashchange事件介绍及其常见应用场景(不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题),hashchange和popstate事件触发条件
    2023-11-11
  • js实现mp3录音通过websocket实时传送+简易波形图效果

    js实现mp3录音通过websocket实时传送+简易波形图效果

    这篇文章主要介绍了js实现mp3录音通过websocket实时传送+简易波形图效果,本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS图片切换的具体方法(带缩略图版)

    JS图片切换的具体方法(带缩略图版)

    这篇文章介绍了JS图片切换的具体方法,有需要的朋友可以参考一下
    2013-11-11
  • Webpack打包字体font-awesome的方法示例

    Webpack打包字体font-awesome的方法示例

    本篇文章主要介绍了Webpack打包字体font-awesome的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Bootstrap入门书籍之(一)排版

    Bootstrap入门书籍之(一)排版

    这篇文章主要介绍了Bootstrap入门书籍之(一)排版的相关资料,需要的朋友可以参考下
    2016-02-02
  • JavaScript快速排序(quickSort)算法的实现方法总结

    JavaScript快速排序(quickSort)算法的实现方法总结

    快速排序的思想式 分治法,选一个基准点,然后根据大小进行分配,分配然完毕之后,对已经分配的进行递归操作,最终形成快速排序,所以递归也是快速排序思想的一个重要组成部分,本文主要给大家介绍了JavaScript实现快速排序的写法,需要的朋友可以参考下
    2023-11-11
  • JS判断日期格式是否合法的简单实例

    JS判断日期格式是否合法的简单实例

    下面小编就为大家带来一篇JS判断日期格式是否合法的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Javascript 自定义类型方法小结

    Javascript 自定义类型方法小结

    Javascript 常用自定义类型方法整理,需要的朋友可以参考下。
    2010-03-03

最新评论