javascript删除数组元素的七个方法示例


Posted in Javascript onSeptember 09, 2019

前言

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
浅析Ajax语法
Dec 05 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
微信小程序 select 下拉框组件功能
Sep 09 #Javascript
移动端手指操控左右滑动的菜单
Sep 08 #Javascript
swiper Scrollbar滚动条组件详解
Sep 08 #Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 #Javascript
swiper4实现移动端导航切换
Oct 16 #Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
自我评价的范文
2014/02/02 职场文书
医德医风演讲稿
2014/05/20 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
企业党员个人自我评价
2014/09/20 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
高三数学教学反思
2016/02/18 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
部分武汉产收音机展览
2022/04/07 无线电