Js之如何移除Array/数组中指定元素

 更新时间:2023年03月06日 10:26:15   作者:idomyway  
这篇文章主要介绍了Js之如何移除Array/数组中指定元素问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Js 移除Array数组中指定元素

首先需要找到元素的下标:

var array = [0,1,2,3,4,5];
var index = array.indexOf(5);

使用splice函数进行移除:

if (index > -1) {
    array.splice(index, 1);
}
  • indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。
  • splice函数的第二个参数指删除的数目。
  • splice直接修改原数组,并把删除的所有元素以另一个新数组的方式返回。

Js 数组删除元素 避坑

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”,数组的元素也仅剩两项。

队列方法

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

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

操作方法

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

原型方法

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–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • Javascript动手实现call,bind,apply的代码详解

    Javascript动手实现call,bind,apply的代码详解

    这篇文章主要为大家详细介绍了Javascript动手实现call,bind,apply的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • JS button按钮实现submit按钮提交效果

    JS button按钮实现submit按钮提交效果

    今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,怎么实现呢?下面小编给大家分享JS button按钮实现submit按钮提交效果,感兴趣的朋友参考下吧
    2016-11-11
  • js之如何筛选出两个数组相同的值

    js之如何筛选出两个数组相同的值

    这篇文章主要介绍了js之如何筛选出两个数组相同的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • javascript实现贪吃蛇游戏(娱乐版)

    javascript实现贪吃蛇游戏(娱乐版)

    这篇文章主要为大家详细介绍了javascript实现贪吃蛇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 下雪了 javascript实现雪花飞舞

    下雪了 javascript实现雪花飞舞

    下雪了,这篇文章主要介绍了javascript实现雪花飞舞,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript实现视频转GIF的示例代码

    JavaScript实现视频转GIF的示例代码

    这篇文章主要介绍了JavaScript实现视频转GIF,本文一共会按照以下三步去实现一个视频转 GIF 功能,解封装视频,从视频文件中获取视频帧,解码视频帧,获取帧图像信息,拼装帧图像信息,生成 GIF,需要的朋友可以参考下
    2024-03-03
  • bootstrap laydate日期组件使用详解

    bootstrap laydate日期组件使用详解

    这篇文章主要为大家详细介绍了bootstrap laydate日期组件使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jser必看的破解javascript各种加密的反向思维方法

    jser必看的破解javascript各种加密的反向思维方法

    才发现的破解javascript各种加密的反向思维方法,大家有好的方法都跟帖啊最近发现了一个代码,加密了5层左右,我将破解到最后一步,而且不用javascript解密程序
    2007-04-04
  • canvas实现图像截取功能

    canvas实现图像截取功能

    这篇文章主要为大家详细介绍了canvas实现图像截取功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论