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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
Javascript自定义事件详解
Jan 13 Javascript
vue构建单页面应用实战
Apr 10 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 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对字符串的递增运算分析
2010/08/08 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php rsa加密解密使用详解
2015/01/14 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python下载网络小说实例代码
2018/02/03 Python
django的csrf实现过程详解
2019/07/26 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
python属于解释型语言么
2020/06/15 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
建设单位项目负责人任命书
2014/06/06 职场文书
合同意向书范本
2014/07/30 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
在Python中如何使用yield
2021/06/07 Python