在JavaScript中,除了Object之外,Array类型(数组)恐怕就是最常用的类型了。与其他语言的数组相比,JavaScript中的Array非常灵活。这种灵活性有利有弊,好处是其富有创造性,可以提供各种灵活的解决方案;坏处是容易脑子不够用,因为事实上,它太灵活了,灵活到无法控制的抓狂。

前面调侃了几句,回归正题,这里要总结7个在JavaScript中删除Array元素的方法,分别是利用length属性、delete关键字、pop()栈方法、shift()队列方法、splice()操作方法、forEach()或filter()迭代方法和prototype原型方法。

length属性

JavaScript中Array的length属性非常有特点一一它不是只读的。因此,可以通过设置这个属性来达到从数组的末尾移除项或添加新项的目的。

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

delete关键字

JavaScript提供了一个delete关键字用来删除(清除)数组元素。

var colors = ["red", "blue", "grey", "green"];
delete colors[0];console.log(colors); // [undefined, "blue", "grey", "green"]

要注意的是,使用delete删除元素之后数组长度不变,只是被删除元素被置为undefined了。

pop()栈方法

JavaScript中的Array对象提供了一个pop()栈方法用于弹出并返回数组中的最后一项,某种程度上可以当做删除用。

栈数据结构的访问规则是FILO(First In Last Out,先进后出),栈操作在栈顶添加项,从栈顶移除项,使用pop()方法,它能移除数组中的最后一项并返回该项,并且数组的长度减1。

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

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

shift()队列方法

JavaScript中的Array对象提供了一个shift()队列方法用于弹出并返回数组中的第一项,某种程度上也可以当做删除用。

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

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

可以看出,在调用shift()方法时,数组返回第一项,即”red”,数组的元素也仅剩两项。

splice()操作方法 

在JavaScript的Array对象中提供了一个splice()方法用于对数组进行特定的操作。splice()恐怕要算最强大的数组方法了,他的用法有很多种,在此只介绍删除数组元素的方法。在删除数组元素的时候,它可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数。

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

可以看出,在调用了splice(0, 1)方法时,数组从第一项开始,删除了一项。

迭代方法

所谓的迭代方法就是用循环迭代数组元素,发现符合要删除的项则删除。用的最多的地方,可能是当数组中的元素为对象的时候,可以根据对象的某个属性(例如ID)来删除数组元素。

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

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

可以看到这里还要配合splice()方法去实现删除,循环只是为了找到特定的元素。另外一种思路是循环将不需要删除的元素推入到新的数组中,也能达到假性删除特定元素的目的。

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

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

代码很简单,找出元素不是red的项数返回给colors(其实是得到了一个新的数组,并不是在原数组上进行删除操作),一定程度上也算是达到了删除特定元素的目的。

prototype原型方法

可以通过在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对象都可以使用该方法。尽管可以这么做,但是不推荐在产品化的程序中修改原生对象的原型。道理很简单,如果只是某个实现中缺少某个方法,就在原生对象的原型中添加这个方法,那么当在另一个支持该方法的实现中运行代码时,就可能导致命名冲突。而且这样做可能会意外地导致原生方法被重写。

"别人稍一注意你,你就敞开心扉,你觉得这是坦率,其实往往是因为孤独。"

转载于:https://www.cnblogs.com/yanggb/p/11464821.html

javascript删除数组元素的7个方法相关推荐

  1. javascript删除数组元素的几个方法

    javascript删除数组元素的7个方法 文章目录 一.length属性 二.delete关键字 三.pop()栈方法 四.shift()队列方法 五.splice()操作方法 六.迭代方法 七.p ...

  2. js 删除数组元素。

    var arr=['a','b','c']; 若要删除其中的'b',有两种方法: 1.delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为undefined了,但是 ...

  3. JavaScript 删除数组中指定元素(5种方法)

    JavaScript 删除数组中指定元素 在 JavaScript 中,数组是一种常见的数据类型,可以存储多个元素.有时候,我们需要从数组中删除某些特定的元素.本文将介绍如何使用 JavaScript ...

  4. php js动态删除数组元素,javascript如何删除数组中的指定元素

    js删除数组中的指定元素主要分为两步,首先判断数组中是否包含这个元素,然后再通过splice()方法来删除指定元素 本篇文章主要介绍的是如何通过javascript语言对数组中的指定元素进行删除的方法 ...

  5. 几种php 删除数组元素方法

    看一完整删除重复数组实例  代码如下 复制代码 //删除数组中的一个元素 function array_remove_value(&$arr, $var){ foreach ($arr as ...

  6. es6删除数组某项_es6删除数组元素或者对象元素的方法介绍(代码)

    本篇文章给大家带来的内容是关于es6删除数组元素或者对象元素的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一,删除数组元素let arr = [ {name:'黎 ...

  7. [转]JavaScript 删除数组中指定值的元素

    /* 方法:Array.remove(dx)    * 功能:删除数组元素.    * 参数:dx删除元素的下标.    * 返回:在原数组上修改数组    */ //经常用的是通过遍历,重构数组. ...

  8. JavaScript 添加删除数组元素

    添加删除数组元素方法 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推 (1) push 是可以给数组追加新的元素 (2) push() 参数直接写 数组元素就可以了 ...

  9. JS删除数组元素的函数介绍

    有时候我们需要数组元素的值,那么就可以参考下面的方法,文中提到了不少这方面的资料,数组去重功能等 split将字符串转为数组并输出的代码: 复制代码 代码如下: <script language ...

最新文章

  1. UITableView学习笔记
  2. 宽度如何设置 滑动条_【Axure9百例】26.得到交互设计左右滑动
  3. 再谈 $* 和 $@ 在 Bash 中的表现
  4. kali linux之edb--CrossFire缓冲区溢出
  5. C#中yield return用法
  6. SQLServer 合并ID相同行,同ID的列值累加。
  7. winform 获取焦点_AutoCAD .NET 二次开发实例(13) 获取块参照坐标并输出到Excel
  8. win11系统通知怎么取消 Windows11取消系统通知的步骤方法
  9. 英伟达显卡不同架构_NVIDIA显卡架构代号的另一面:他们都是伟大的科学先驱
  10. 微软官方提供的免费正版 Windows 8.1/Win10/7/XP/Vista 操作系统虚拟机镜像下载
  11. 萤火虫算法_一种优化方法:蜂鸟优化算法
  12. 暗黑主题(皮肤)资源 (实用)
  13. python字符串字母怎么取出_Python需要从字符串中提取第一个和最后一个字母
  14. PAT 甲级1021 Deepest Root
  15. Python代码实现md5加密
  16. 【Python】如何用pyth做游戏脚本(太简单了吧)
  17. 洛谷P3987 我永远喜欢珂朵莉~ 树状数组+vector(暴力)
  18. CMD命令窗口全屏设置
  19. 【大数据开发】SparkCore——进阶算子、Action算子、查看分区数的三种方式
  20. 【业务安全-03】业务逻辑漏洞之暴力破解(Burte Force)

热门文章

  1. ttkefu如何设置成或关闭静音模式
  2. 梦想天空(优秀的博主)
  3. VMware虚拟机安装macos Ventura 13.3(22E252)教程镜像CDR/ISO下载
  4. android traceroute 功能实现,traceroute使用以及实现原理
  5. PHP网站警报,多种PHP程序过滤漏洞(转)
  6. Impala时区问题
  7. GPD P2MAX用gibMacOS图文安装黑苹果
  8. UE学习记录:猴子神庙(Monkeyshrine)
  9. 你真的了解java吗?java总结八
  10. 服务器春节期间维护,春节前期系统维护公告