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对象都可以使用该方法。

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 微信浏览器左上角返回按钮监听的实现

    微信浏览器左上角返回按钮监听的实现

    这篇文章主要介绍了微信浏览器左上角返回按钮监听的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • js中获取时间new Date()的全面介绍

    js中获取时间new Date()的全面介绍

    下面小编就为大家带来一篇js中获取时间new Date()的全面介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript动态改变表格单元格内容的方法

    JavaScript动态改变表格单元格内容的方法

    这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • JavaScript中的await/async的作用和用法

    JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。这篇文章主要介绍了JavaScript中的await/async的作用和用法的相关资料
    2016-10-10
  • javasctipt如何显示几分钟前、几天前等

    javasctipt如何显示几分钟前、几天前等

    这篇文章主要介绍了javasctipt如何显示几分钟前、几天前等,需要的朋友可以参考下
    2014-04-04
  • moment.js轻松实现获取当前日期是当年的第几周

    moment.js轻松实现获取当前日期是当年的第几周

    这篇文章主要介绍了moment.js轻松实现获取当前日期是当年的第几周,需要的朋友可以参考下
    2015-02-02
  • javascript中call,apply,bind的区别详解

    javascript中call,apply,bind的区别详解

    这篇文章主要介绍了javascript中call,apply,bind的区别详解,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-12-12
  • JS三级联动代码格式实例详解

    JS三级联动代码格式实例详解

    这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • echarts折线图legend太多与图重叠处理办法

    echarts折线图legend太多与图重叠处理办法

    ECharts折线图的Legend(图例)用于展示每条折线所对应的数据系列名称,下面这篇文章主要给大家介绍了关于echarts折线图legend太多与图重叠的处理办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02

最新评论