• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Javascript怎么移除数组元素

Javascript怎么移除数组元素

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Javascript,移除数组元素等相关知识,希望对您有所帮助

javascript移除数组元素的方法:1、通过length属性移除数组元素;2、通过delete关键字移除;3、通过栈方法移除;4、通过队列方法移除;5、通过操作方法移除;6、通过迭代方法移除;7、通过原型方法移除。


Javascript怎么移除数组元素


JavaScript中数组元素删除的七大方法汇总

在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了。与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活。今天我就来总结了一下JavaScript中Array删除的方法。大致的分类可以分为如下几类:

1、length

2、delete

3、栈方法

4、队列方法

5、操作方法

6、迭代方法

7、原型方法

下面我对上面说的方法做一一的举例和解释。

一、length

JavaScript中Array的length属性非常有特点一一它不是只读的。因此,通过设置这个属性可以从数组的末尾移除项或添加新项,请看下面例子:

var colors = ["red", "blue", "grey"];   //创建一个包含3个字符串的数组colors.length = 2;console.log(colors[2]);  //undefined

二、delete关键字

var arr = [1, 2, 3, 4];delete arr[0];console.log(arr);   //[undefined, 2, 3, 4]

可以看出来,delete删除之后数组长度不变,只是被删除元素被置为undefined了。

三、栈方法

var colors = ["red", "blue", "grey"];var item = colors.pop();console.log(item);      //"grey"console.log(colors.length);    //2

可以看出,在调用Pop方法时,数组返回最后一项,即”grey”,数组的元素也仅剩两项。

四、队列方法

队列数据结构的访问规则是FIFO(先进先出),队列在列表的末端添加项,从列表的前端移除项,使用shift方法,它能够移除数组中的第一个项并返回该项,并且数组的长度减1。

var colors = ["red", "blue", "grey"];var item = colors.shift();console.log(item);      //"red"console.log(colors.length);    //2

五、操作方法

splice()恐怕要算最强大的数组方法了,他的用法有很多种,在此只介绍删除数组元素的方法。在删除数组元素的时候,它可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数,例如splice(0, 2)会删除数组中的前两项。

var colors = ["red", "blue", "grey"];var item = colors.splice(0, 1);console.log(item);      //"red"console.log(colors);    //["blue", "grey"]

六、迭代方法

所谓的迭代方法就是用循环迭代数组元素发现符合要删除的项则删除,用的最多的地方可能是数组中的元素为对象的时候,根据对象的属性例如ID等等来删除数组元素。下面介绍两种方法:


第一种用最常见的ForEach循环来对比元素找到之后将其删除:

var colors = ["red", "blue", "grey"]; colors.forEach(function(item, index, arr) {    if(item == "red") {        arr.splice(index, 1);    }});

第二种我们用循环中的filter方法:

var colors = ["red", "blue", "grey"]; colors = colors.filter(function(item) {    return item != "red"}); console.log(colors);    //["blue", "grey"]

代码很简单,找出元素不是”red”的项数返回给colors(其实是得到了一个新的数组),从而达到删除的作用。

七、原型方法

通过在Array的原型上添加方法来达到删除的目的:

Array.prototype.remove = function(dx) {     if(isNaN(dx) || dx > this.length){        return false;    }    for(var i = 0,n = 0;i < this.length; i++) {        if(this[i] != this[dx]) {            this[n++] = this[i];        }    }    this.length -= 1;};var colors = ["red", "blue", "grey"];colors.remove(1); console.log(colors);    //["red", "grey"]

在此把删除方法添加给了Array的原型对象,则在此环境中的所有Array对象都可以使用该方法。尽管可以这么做,但是我们不推荐在产品化的程序中来修改原生对象的原型。道理很简单,如果因某个实现中缺少某个方法,就在原生对象的原型中添加这个方法,那么当在另一个支持该方法的实现中运行代码时,就可能导致命名冲突。而且这样做可能会意外的导致重写原生方法。

在此,我汇总了JavaScript的Array中常用的删除元素的方法,欢迎大家来补充。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一起来聊聊JavaScript函数柯里化
  • 在javascript中,NaN是什么类型?
  • javascript调试之console.table()
  • Javascript中常见的内置对象有哪些
  • Javascript怎么实现字符串替换星号
  • 解决JavaScript中数组排序sort不发生改变
  • Javascript怎么实现红绿灯
  • 两行 Javascript 代码生成 UUID的方法
  • Javascript怎么实现四位随机验证码
  • javascript怎么判断是否为null

相关文章

  • 2022-04-29javascript怎么判断是否为null
  • 2022-04-29vue路由学习之区分$route和$router,看看它们的区别
  • 2022-04-29如何手机端判断浏览器的类型(JavaScript)
  • 2022-04-29宝塔Linux面板之修改MySQL默认保存位置
  • 2022-04-29jQuery怎么实现鼠标经过改变背景色
  • 2022-04-29vue.js路由this.route.push跳转页面不刷新怎么办
  • 2022-04-29PHP在图片中用 imagettftext() 添加水印(图文详解)
  • 2022-04-29浅谈微信小程序中引入并使用自带和外部图标的方法
  • 2022-04-29为什么Javascript小数相减会出现一长串的小数位数?
  • 2022-04-29PhotoShop绘制反光水晶玻璃球按钮教程

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • WordPress密码重设提示“您的密码重设链接无效,请在下方请求新链接”
    • 浅析Angular+rxjs怎么实现拖拽功能?
    • 聊聊Bootstrap中的导航条
    • 小程序怎样在页面传递对象数组?
    • Javascript如何阻止事件冒泡和事件本身发生
    • JavaScript如何处理并行请求?四种方式浅析
    • 浅谈Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
    • 百度频繁变更算法,我们该怎么办?
    • Photoshop使用素材制作唯美的花体字
    • Photoshop制作逼真的镶嵌钻石艺术字

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有