js 数组删除和添加数据「建议收藏」

js 数组删除和添加数据「建议收藏」}//新增checkbox选中监听事件table.on(‘checkbox(LAY-team-add)’,function(obj){alert(obj.checked)varid=obj.data.id;if(obj.checked){addCheckbox.push(id);alert(addCheckbox)…

大家好,又见面了,我是你们的朋友全栈君。

}
//新增checkbox选中监听事件
table.on('checkbox(LAY-team-add)', function(obj){
    alert(obj.checked)
    var id=obj.data.id;
    if(obj.checked){
        addCheckbox.push(id);
        alert(addCheckbox)
    }else{
     var index=  addCheckbox.indexOf(id);
        addCheckbox.splice(index, 1);
    }
    alert(addCheckbox)
});

 

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

原文链接:https://blog.csdn.net/u010323023/article/details/52700770 

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

1、length 
2、delete 
3、栈方法 
4、队列方法 
5、操作方法 
6、迭代方法 
7、原型方法

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

一、length

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

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

二、delete关键字

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

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

三、栈方法

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

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

四、队列方法

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

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

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

1 var colors = ["red", "blue", "grey"];
2 var item = colors.splice(0, 1);
3 console.log(item);      //"red"
4 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方法:

复制代码

1 var colors = ["red", "blue", "grey"];
2 
3 colors = colors.filter(function(item) {
4     return item != "red"
5 });
6 
7 console.log(colors);    //["blue", "grey"]

复制代码

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

七、原型方法

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

复制代码

 1 Array.prototype.remove = function(dx) {
 2 
 3     if(isNaN(dx) || dx > this.length){
 4         return false;
 5     }
 6 
 7     for(var i = 0,n = 0;i < this.length; i++) {
 8         if(this[i] != this[dx]) {
 9             this[n++] = this[i];
10         }
11     }
12     this.length -= 1;
13 };
14 
15 var colors = ["red", "blue", "grey"];
16 colors.remove(1);
  console.log(colors); //["red", "grey"]

复制代码

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

 

默默搬砖中 ——假装自己是小白

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134505.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 中文分词技术是什么_中文分词技术

    中文分词技术是什么_中文分词技术分词技术就是搜索引擎针对用户提交查询的关键词串进行的查询处理后根据用户的关键词串用各种匹配方法进行的一种技术。当然,我们在进行数据挖掘、精准推荐和自然语言处理工作中也会经常用到中文分词技术。一、为什么

    2022年8月4日
    7
  • 什么是SOAP,有哪些应用

    什么是SOAP,有哪些应用SOAP是一种轻量级协议,用于在分散型、分布式环境中交换结构化信息。SOAP利用XML技术定义一种可扩展的消息处理框架,它提供了一种可通过多种底层协议进行交换的消息结构。这种框架的设计思想是要独立于任何一种特定的编程模型和其他特定实现的语义。SOAP规范还定义了HTTP消息是怎样传输SOAP消息的。MSMQ、SMTP、TCP/IP都可以做SOAP的传输协议。转载于:ht…

    2022年7月24日
    7
  • 什么是递归,通过这篇文章,让你彻底搞懂递归

    什么是递归,通过这篇文章,让你彻底搞懂递归想了解更多数据结构以及算法题 可以关注微信公众号 数据结构和算法 每天一题为你精彩解答 也可以扫描下面的二维码关注啥叫递归聊递归之前先看一下什么叫递归 递归 就是在运行的过程中调用自己 构成递归需具备的条件 1 子问题须与原始问题为同样的事 且更为简单 2 不能无限制地调用本身 须有个出口 化简为非递归状况处理 递归语言例子我们用 2 个故事来阐述一下什么叫递归 1 从前有座山 山里有座庙 庙里有个老和尚 正在给小和尚讲故事呢 故事是什么呢 从前有座山 山里有座庙 庙里有个老和尚 正

    2025年6月22日
    4
  • kali装电脑_Kali安装教程(Windows7和kali双系统安装教程)[通俗易懂]

    kali装电脑_Kali安装教程(Windows7和kali双系统安装教程)[通俗易懂]Kali安装教程(一)Windows7+kali双系统安装准备先安装win7,然后安装kali,并且kali的引导项安装在/boot分区而不安装在MBR中,因为这样的话就算重装win7,kali系统经过简单引导仍然可以使用。Win7的安装此处就不在赘述,现在只聊一聊kali的安装。注:教程中个别截图借用了网上某人热心童鞋的截图,在此表示感谢!!1)准备阶段准备4G的优盘一个;刻录工具为:unetb…

    2022年5月5日
    112
  • docker容器的启动(docker容器启动时间)

    在使用-d参数时,容器启动后会进入后台,用户无法看到容器中的信息,也无法进行操作。这个时候如果需要进入容器进行操作,有多种方法,包括使用官方的attach或exec命令,以及第三方的nsenter工具等。1、attach命令attach命令是Docker自带的命令,命令格式为:dockerattach[–detach-keys[=[]]][–no-stdin][–sig-prox

    2022年4月15日
    195
  • spring cloud之 hello world和eurake介绍及eurake使用

    spring cloud之 hello world和eurake介绍及eurake使用一.springcloud之helloworld1.两个微服务,分别是用户和订单,其中用户是微服务提供者,订单是微服务消费者2.首先建一个工程,里面有两个module:prvoider-user和comsumer-ordercomsumer-user配置文件:prvoider-order配置文件:用spring提供的RestTemplate访问rest…

    2022年5月10日
    53

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号