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 相关文章推荐
javascript实现跨域的方法汇总
Jun 25 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
微信小程序 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利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
JS实现图片手风琴效果
2020/04/17 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python地震数据可视化详解
2019/06/18 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
Java基础知识面试题
2014/03/25 面试题
全国道德模范事迹
2014/02/01 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
《长城》教学反思
2014/02/14 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
小学生环保标语
2014/06/13 职场文书
党的生日活动方案
2014/08/15 职场文书
报案材料怎么写
2015/05/25 职场文书
小学生读书笔记范文
2015/06/30 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python