javascript怎么移除数组元素

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

javascript怎么移除数组元素

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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

在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了。与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活。今天我就来总结了一下JavaScript中Array删除的方法。大致的分类可以分为如下几类:
1、length
2、delete
3、栈方法
4、队列方法
5、操作方法
6、迭代方法
7、原型方法

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

立即学习“Java免费学习笔记(深入)”;

一、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"]

登录后复制

【推荐学习:javascript高级教程

六、迭代方法

所谓的迭代方法就是用循环迭代数组元素发现符合要删除的项则删除,用的最多的地方可能是数组中的元素为对象的时候,根据对象的属性例如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 

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

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

登录后复制

以上就是javascript怎么移除数组元素的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2714196.html

(0)
上一篇 2025年3月7日 21:31:45
下一篇 2025年3月3日 06:19:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript是h5吗

    javascrip不是h5,javascrip是一种具有函数优先的轻量级、解释型或即时编译型的编程语言;而h5是指HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式。 本文操作环境:windows7系统、javascri…

    2025年3月7日
    200
  • 不属于javascript的数据类型是什么

    不属于javascript的数据类型是interface,interface是js中的保留字;而javascript的数据类型有Undefined、Number、Symbol等等。 本文操作环境:windows7系统、javascript1…

    2025年3月7日
    200
  • ajax和javascript区别是什么

    ajax和javascript区别:1、javascript是一种即时编译型的编程语言,而Ajax是一种用于创建更快以及交互性更强的Web应用程序的技术;2、Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。 …

    2025年3月7日
    200
  • 分享ES2019中值得收藏的8个有用功能

    本篇文章给大家介绍es2019 中 8 个非常有用的功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 ES2019 规范是对 JavaScript的小规模扩展,但仍带来了一些有趣的功能。本文向你展示八个 ES2019 …

    2025年3月7日
    200
  • javascript特权方法有什么用

    在javascript中,特权方法指那些在查看并处理私有变量的同时,允许用户以公共方法的方式访问的方法。作用:在构造函数外面公开访问(仅限于实例化的对象),而且还能够访问私有成员和方法;通过特权方法可以控制公有方法对私有属性或方法的访问。 …

    2025年3月7日
    200
  • javascript中bind是什么意思

    javascript中bind是EcmaScript5新增的方法,bind()方法用于创建一个新的函数,当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。 本文操作环境:windows7系统…

    2025年3月7日
    200
  • javascript有多少种输出

    javascript有3种输出,分别是:1、“document.write()”输出方式;2、“alert()”输出方式;3、“console.log()”输出方式。 本文操作环境:windows7系统、javascript1.8.5版、D…

    2025年3月7日
    200
  • 详解6个不同级别的组件可重用性概念

    本篇文章给大家详细介绍一下6个不同级别的组件可重用性概念。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。 有些组…

    2025年3月7日
    200
  • javascript find()方法有什么用

    js中find()方法用于返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回“undefined”;基本语法“array.find(function(当前元素, 索引, 数组对象))”。 本教程操作环境:windo…

    2025年3月7日
    200
  • javascript中字符串替换函数是什么

    在javascript中,字符串替换函数是“replace()”。replace()用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,语法“string.replace(searchvalue,newvalue)”。…

    2025年3月7日
    200

发表回复

登录后才能评论