JS数组添加或删除元素的三种方式示例详解

 更新时间:2025年08月21日 15:02:01   作者:ernesto_ji  
本文介绍了JavaScript中三种常见的数组操作方法,push()、unshift()和splice(),通过具体实例展示了如何利用这些方法在数组的不同位置添加元素,以及如何使用splice()进行元素的删除,感兴趣的朋友跟随小编一起看看吧

JS数组添加元素的三种方式

1、push() 结尾添加
  数组.push(元素)
  数组.push(newelement1,[newelement2],[newelementX])
  说明:newelement1	必需。要添加到数组的第一个元素。newelement2	可选。要添加到数组的第二个元素。		   newelementX	可选。可添加多个元素。
  var testArray = [0];
  testArray.push(1,2,3)
  console.log(testArray);//0,1,2,3
2、unshift() 头部添加
  数组.unshift(元素)
  数组.unshift(newelement1,[newelement2],[newelementX])
  说明:newelement1	必需。向数组添加的第一个元素。newelement2	可选。向数组添加的第二个元素。newelementX	可选。可添加若干个元素。
  var testArray = [1,2,3];
  testArray.unshift(9)
  console.log(testArray);//9,1,2,3
3、splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。
数组.splice(index,howmany,[item1, ..., itemX])
说明:index	必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。howmany	必需。要删除的项目数量。如果设置为 0,则不会删除项目。item1, ..., itemX	可选。向数组添加的新项目。
 var testArray = [1,2,3];
 //给数据倒数第二个位置增加元素
  testArray.splice(testArray.length-1,0,4)
  console.log(testArray);//1,2,4,3
  //删除数据元素
  var testArray = [1,2,3];
  //从第一个位置开始,删除元素,删除一个
  testArray.splice(0,1)
  console.log(testArray);//2,3

扩展:JavaScript:数组删除指定元素

JavaScript:数组删除指定元素

1.shift()方法

用于删除数组中的第一个元素。

注:此方法会改变数组的长度

let arr = [1,2,3]
arr.shift() // 删除1
// arr为[2,3]

2.pop()方法

用于删除数组中最后一个元素

注:此方法会改变数组的长度

let arr = [1,2,3]
arr.pop(); //删除3
// arr为[1,2]

3.splice()方法

用于添加删除数组中的指定元素

注:此方法会改变数组长度

let arr = [1,2,3]
arr.splice(0,1)
// arr为[2,3]
//删除数组中某个指定元素
let value = 'b', arr=['a','b','c','d']
arr.splice(arr.indexOf(value), 1) //删除'b'
// arr为['a','c','d']

4.slice()方法

从已有数组中返回选定的元素

注:此方法不会改变原始数组

let arr = [1,2,3]
let newArr = arr.slice(1)
// arr为[1,2,3]
// newArr为[2,3]

5.for循环删除

比较麻烦,不推荐

let index = 3,
    arr = [1,2,3,4],
    newArr = [];
for(let i = 0;i < arr.length; i++) {
      if(i !== index) {
          newArr.push(arr[i])                
    }      
}    
// arr为[1,2,3,4]
// newArr为[1,2,3]

6.delete关键字删除

用于删除(数组)元素

注:delete关键字删除元素后数组长度不变,只是删除元素被置为empty了

let arr = [1,2,3,4]
delete arr[2]
// arr为[1,2,empty,4]

7.filter删除

用于删除指定元素

let arr = ['a','b','c','d'], value='b'
arr = arr.filter(item => item != value)
// arr为['a','c','d']

8.set删除

用于删除指定元素

let arr = ['a','b','c','d'],value='b'
let newSet = new Set(arr)
newSet.delete(value)
let newArr = [...newSet]
// newArr为['a','c','d']

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

相关文章

  • javascript实现图片轮播效果

    javascript实现图片轮播效果

    这篇文章主要为大家介绍了javascript实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • layui扩展上传组件模拟进度条的方法

    layui扩展上传组件模拟进度条的方法

    今天小编就为大家分享一篇 layui扩展上传组件模拟进度条的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序授权登录的优雅处理方式

    微信小程序授权登录的优雅处理方式

    这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • js获得地址栏?问号后参数的方法

    js获得地址栏?问号后参数的方法

    这篇文章介绍了js获得地址栏?问号后参数的方法,有需要的朋友可以参考一下
    2013-08-08
  • 静态页面也可以实现预览 列表不同的显示方式

    静态页面也可以实现预览 列表不同的显示方式

    静态页面也可以实现预览 列表不同的显示方式...
    2006-10-10
  • Js可拖拽放大的层拖动特效实现方法

    Js可拖拽放大的层拖动特效实现方法

    这篇文章主要介绍了Js可拖拽放大的层拖动特效实现方法,涉及javascript操作DOM元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript中实现sprintf、printf函数

    JavaScript中实现sprintf、printf函数

    这篇文章主要介绍了JavaScript中实现sprintf、printf函数,这两个函数在大多数编程语言中都有,但JS中却没有,本文介绍在js中实现这两个函数功能,需要的朋友可以参考下
    2015-01-01
  • 微信小程序之购物车功能

    微信小程序之购物车功能

    这篇文章主要为大家详细介绍了微信小程序之购物车功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于JS实现简单滑块拼图游戏

    基于JS实现简单滑块拼图游戏

    本文通过实例代码给大家介绍了JS实现简单滑块拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-10-10
  • 关于Layui Table隐藏列问题

    关于Layui Table隐藏列问题

    今天小编就为大家分享一篇关于Layui Table隐藏列问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论